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

一、效果展示

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

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

二、代码实现

 
  
 


 data() {
    return {
      sortNum: null,
      dbClickIndex: null, // 点击的单元格
      dbClickLabel: '', // 当前点击的列名
      numberPattern: '[1-9]\\d*', // 正则表达式，限制只能输入正整数
    }
 }

methods:{
  //  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()
    }
  }