实现＜el-table＞表格内可编辑（单列）

el-table编辑单列

实现对el-table某一列数据可编辑：

ElementPlus的<el-table>支持cell-click事件，点击某个单元格会触发改事件；

于是，思路如下：

        第一点击单元格时变成可输入状态，离开单元格或者.enter时提交数据，变成不可输入状态；

        第二，el-input最好在点击没个单元格时，自动获取焦点；

代码如下：

<el-table :data="formData.tableData" @cell-click="cellClick" border>
      <el-table-column label="ID" prop="id" align="center" header-align="center"/>
      <el-table-column label="姓名" prop="name" align="center" header-align="center">
        <template #default="{row, $index}">
          <el-input
            v-if="row.isEdit"
            v-model="row.name"
            @keydown.enter="inputNum(row)"
            @blur="blurInput(row)"
          />
          <span v-else>
            {{row.name}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="城市" prop="address" align="center" header-align="center"/>
      <el-table-column label="性别" prop="sex" align="center" header-align="center"/>
    </el-table>

const formData = ref({
  tableData :[
    {id: '1', name: '张张', address: '重庆', sex: '男', isEdit: false},
    {id: '2', name: '李李', address: '北京', sex: '女', isEdit: false},
    {id: '3', name: '王王', address: '上海', sex: '男', isEdit: false},
    {id: '4', name: '可可', address: '广州', sex: '女', isEdit: false},
  ]
})

function cellClick(row: any, column: any, cell, event: Event) {
  row = Object.assign(row, {isEdit: true})
  nextTick(() => {
    const input = cell.querySelector('.cell').querySelector('.el-input__inner')
    input.focus()
  })
}

function inputNum(row) {
  console.log(row)
  row = Object.assign(row, {isEdit: false})
}

function blurInput(row){
  row = Object.assign(row, {isEdit: false})
}