vue el-table字段点击出现el-input输入框，失焦保存_el-table @input

一、效果展示

• 当没有数据初始化展示如下：

• 有数据展示数据，点击出现输入框， 失焦保存修改

二、代码实现

<!-- @cell-click="cellClick" 当前单击的单元格 -->
<el-table
    ref="table"
    size="mini"
    height="100%"
    row-key="id"
    :data="tableData"
    :row-class-name="getRowClass"
    @cell-click="cellClick"
 >
 <el-table-column width="100" label="排序" show-overflow-tooltip>
  <template slot-scope="scope">
    <span
      v-if="
        scope.row.index === dbClickIndex &&
        dbClickLabel === '排序'
      "
    >
      <el-input
        ref="sortNumRef"
        v-model="sortNum"
        placeholder="请输入"
        @blur="inputBlur(scope.row)"
        :pattern="numberPattern"
      />
    </span>
    <div v-else>
      <div class="flex_between cursor_pointer">
        <span
          :style="{ color: !scope.row.sortNum ? '#bbb' : '' }"
          >{{ scope.row.sortNum || '请输入' }}</span
        >
        <i class="el-icon-edit" style="color: #1989fe"></i>
      </div>
    </div> 
  </template>
 </el-table-column>
</el-table>
 
 data() {
    return {
      sortNum: null,
      dbClickIndex: null, // 点击的单元格
      dbClickLabel: '', // 当前点击的列名
      numberPattern: '[1-9]\\d*', // 正则表达式，限制只能输入正整数
    }
 }
 
methods:{
 // 把每一行的索引放进row
    getRowClass({ row, rowIndex }) {
      row.index = rowIndex
    },
  //  row 当前行 column 当前列
    cellClick(row, column, cell, event) {
      if (column.label === '排序') {
        this.dbClickIndex = row.index
        this.dbClickLabel = column.label
        this.sortNum = row.sortNum
        //聚焦input
        this.$nextTick(() => {
          this.$refs.sortNumRef.focus()
        })
      }
    },
    // 失去焦点初始化
    inputBlur(row, event, column) {
      this.editThemeIndex(row)
      this.dbClickIndex = null
      this.dbClickLabel = ''
      this.sortNum = null
    },
    // 编辑主题指标列表-排序字段
    editThemeIndex(row) {
      if (this.sortNum === '' || this.sortNum === row.sortNum) return
      const params = {
        sortNum: Number(this.sortNum) || '',
        id: row.id
      }
      //接口请求
      xxxApi(params).then((res) => {
        if (res.code === 200) {
          this.$message.success('修改成功')
          this.refreshClick()
        }
      })
    },
    // 刷新
    refreshClick(val) {
      this.pages.pageIndex = 1
      this.initTable()
    }
  }