el-table表格select下拉框可编辑 默认隐藏select下拉框 点击展示 选中之后在隐藏_el-table点击单元格显示下拉框

    <el-table ref="table" v-loading="loading" :data="roleList"   @cell-click="editCell" >
      <el-table-column align="center" label="展示方式" show-overflow-tooltip type="name"  width="200">
        <template slot-scope="scope">
          <el-select
            :ref="`name-${scope.row.id}`"
            v-model="scope.row.technicalParamName"
            v-show="scope.row.id === tabClickId && tabClickLabel === '展示方式'"
            placeholder="选择展示方式"
            @change="inputBlur(scope.row)"
            @blur="inputBlur(scope.row)">
            <el-option
              v-for="option in nameOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            ></el-option>
          </el-select>
          <div class="cell-text" v-show="scope.row.id !== tabClickId || tabClickLabel !== '展示方式'">{{ scope.row.technicalParamName }}</div>
        </template>
      </el-table-column>
</el-table>
 
方法如下 
 // 失去焦点初始化
      inputBlur(item) {
          this.tabClickId = "";
          this.tabClickLabel = "";
          //这里还可以进行其他数据提交等操作
        },
    editCell(item, column, cell, event){
          //根据点击的单元格判断是否可变成下拉框
          switch (column.label) {
            case '序号': //当为序号时不变成输入框
              return
            default: 
              this.tabClickId = item.id
              this.tabClickLabel = column.label
              break
          }
          //输入框默认获取焦点
          if (column.property === 'name') {
      const refName = `name-${row.id}`;
      this.$nextTick(() => {
        this.$refs[refName].focus();
      });
    }
          
        },
 
data中的变量
 
  tabClickId: '',
      tabClickLabel: ''