el-table实现通过按钮控制编辑单元格内容

1.前言

公司开发时需要实现一个在表格内可编辑的列，通过点击按钮控制显示输入框，编辑单元格内容。对插槽没啥理解也没用过，导致使用过程中遇到了一些问题。

2.示例

2.1效果展示

3.完成步骤

3.1遇到的问题

直接使用v-if和v-else控制显示和隐藏，会导致修改时整列或整行都被修改，于是乎开始在网上搜索。
起初看到这位老哥写的文章，借鉴实现后出现了问题
https://blog.csdn.net/hongtoushan/article/details/114130938
使用document.querySelector()方法修改style的display属性，在handleCellClick()中可以修改，并且页面也可以渲染。
但是在cancelEditable()中display属性可以修改，在style中显示display属性没变化，无法实现效果。钻了一天牛角尖后，添加了一个boolean类型的属性，通过v-slot="scope.row.xxx"访问实现

3.2实现的部分代码

template

<el-table :data="floorTable.list" v-show="floorTable.show" v-loading="floorTable.loading"
          :header-cell-style="{background:'#FAFAFA', color: '#8F9BB3'}"
>
  <el-table-column align="center" min-width="160" label="楼层" prop="floor"/>
  <el-table-column align="center" min-width="160" label="别名" prop="name">
    <template v-slot="scope">
      <el-input v-if="scope.row.edit" v-model="scope.row.name" size="small" :style="'width:90px'"/>
      <span v-else>{{ scope.row.name }}</span>
      <el-button v-if="scope.row.edit" class="ml10" type="primary" size="small"
                 icon="el-icon-check" @click="saveCellEdit(scope.row)"
      />
      <el-button v-else class="ml10" type="primary" size="small" icon="el-icon-edit"
                 @click="cellNameEdit(scope.row)"
      />
    </template>
  </el-table-column>
</el-table>

data

floorTable: {
    show: false,
    otherNameShow: false,
    buttonShow: true,
    dWidth: '850px',
    width: 'width:260px',
    queryParams: {
      baseInfoLiftNumber: '',
      pageNum: 1,
      pageSize: 3
    },
    list: [{
      floor: '',
      name: ''
    }],
    loading: false,
    total: 0
  }
}

methods

//生成楼层信息
generateTable() {
  let _ = this
  _.floorTable.list = []
  _.floorTable.show = true
  _.floorTable.total = parseInt(_.dialog2.formInfo.aboveGroundFloor) - parseInt(_.dialog2.formInfo.underGroundFloor)
  for (let i = _.dialog2.formInfo.underGroundFloor; i <= _.dialog2.formInfo.aboveGroundFloor; i++) {
    if (i == 0) {
      continue
    }
    _.floorTable.list.push({
      floor: i,
      name: i,
      edit: false
    })
  }
},

saveCellEdit(row) {
  let _ = this
  row.edit = false
},

cellNameEdit(row) {
  let _ = this
  row.edit = true

},

总结

插槽+v-if，实现el-button控制单元格的元素达成需求效果

代码功能已实现，类，id，data中的属性等有的没用上，后续会优化修改