有个业务场景需要需要点击表格单元格变成input编辑，点击其他地方input切换成span。

如图：

未编辑状态使用span显示

 编辑状态切换成input

 代码

//html
template v-slot:value="{row}">
     <el-input v-if="row.isEdit" placeholder="请输入内容" v-model="row.value" ref="Textinp"  clearable @blur="preserve(row)"></el-input>

    <span  v-show="!row.isEdit" class="valueEdit" @click="valueEdit(row)">{{row.value}}            
    </span>
 </template>


//js

methods:{
   // 值编辑
    valueEdit(row) {
      this.$set(row, "isEdit", true)
      this.$nextTick(() => {
          this.$refs.Textinp.focus();
        })
 },

  // 值保存
    preserve(row){
      this.$set(row, "isEdit", false)
    },

在这里就出现了一个问题，那就是切换到input的时候 无法自动获取焦点，无法获取焦点的话就没办法点击其他地方关闭。在百度也找了很多办法，都是无效。最终的解决方案就是在html哪里把v-if改成v-show就解决了这个问题。

修改代码

<el-input v-show="row.isEdit" placeholder="请输入内容" v-model="row.value" ref="Textinp"  clearable @blur="preserve(row)"></el-input>

 <span  v-show="!row.isEdit" class="valueEdit" @click="valueEdit(row)">{{row.value}}</span>

ps:如果是多个输入框的话，还是v-if和v-else有效。

pps:如果以上全部方法都无效的话可以试试自定义指令

在data同级定义自定义指令

 
//js
 directives: {
    focus: {
      inserted: function (el) {
        el.querySelector("input").focus()
      }
    }
  },

 使用