vue el-table 表格内编辑 点击字段可编辑 点击其他位置编辑消失

<template>
    <div>
   
    
        
       
       <el-table
        :data="tableData"
        row-key="id"
        @cell-click="editCell" 
       >
       <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column align="center" label="名称" show-overflow-tooltip type="name">
          <template slot-scope="scope">
            <el-input
              :ref="`name-${scope.row.id}`"
              v-model="scope.row.name" 
              v-show="scope.row.id === tabClickId && tabClickLabel === '名称'" placeholder="名称" 
              @blur="inputBlur(scope.row)">
            </el-input>
            <div class="cell-text" v-show="scope.row.id !== tabClickId || tabClickLabel !== '名称'">{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="值" show-overflow-tooltip type="address">
          <template slot-scope="scope">
            <el-input
              :ref="`address-${scope.row.id}`"
              v-model="scope.row.address" 
              v-show="scope.row.id === tabClickId && tabClickLabel === '值'" placeholder="值" 
              @blur="inputBlur(scope.row)">
            </el-input>
            <div class="cell-text" v-show="scope.row.id !== tabClickId || tabClickLabel !== '值'">{{ scope.row.address }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="deleteRow(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
      </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancelMenu">取 消</el-button>
        </div>
  
    </div>
  </template>
  <script type="text/javascript">
  export default {
      mounted() {
      },
      data() {
          return {
    

      selectType: [
      {
          value: "选项1",
          label: "下拉单选",
        },
        {
          value: "选项2",
          label: "下拉多选",
        },
        {
          value: "选项3",
          label: "平铺单选",
        },
        {
          value: "选项8",
          label: "平铺多选",
        },
        {
          value: "选项6",
          label: "文本输入框",
        },
        {
          value: "选项10",
          label: "多行文本信息",
        },
        {
          value: "选项12",
          label: "日期",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
       
      // 表单参数
      formData: {
        name: "",
        stage: "",
      },
      // 表单校验
      rules: {
        name: [{ required: true, message: "行业不能为空", trigger: "blur" }],
        code: [
          { required: true, message: "业务类型不能为空", trigger: "blur" },
        ],
        sort: [
          { required: true, message: "业务类型细分不能为空", trigger: "blur" },
        ],
        stage: [{ required: true, message: "阶段不能为空", trigger: "blur" }],
      },
            ids: 100,
            tableData: [{
              id: 1,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            }, {
              id: 2,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            }, {
              id: 3,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            }, {
              id: 4,
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }],
            tabClickId: '',
            tabClickLabel: ''
          }
      },
      methods: {
   
        deleteRow(index) {
      this.tableData.splice(index, 1);
    },
        addRow() {
      // 向表格中新增一条空数据
      this.tableData.unshift({  
            id: this.ids++,
              name: '',
              address: ''
            });
    },

        editCell(item, column, cell, event){
          //根据点击的单元格判断是否可变成输入框
          switch (column.label) {
            case '序号': //当为序号时不变成输入框
              return
            default: 
              this.tabClickId = item.id
              this.tabClickLabel = column.label
              break
          }
          //输入框默认获取焦点
          this.$nextTick(() => {
            this.$refs[column.type + '-' + item.id].focus();
          })
        },
        // 失去焦点初始化
        inputBlur(item) {
          this.tabClickId = "";
          this.tabClickLabel = "";
          //这里还可以进行其他数据提交等操作
        }
      }
  }
  </script>
  <style lang="scss" scoped>
  .cell-text{
    height: 30px;
  }
  </style>