element table表格点击单元格实现编辑

需求：双击tab列表对应单元格进行编辑，离开时保存

实现方式：

        
          
        
        
          
        
        
          
        
      
// js
data() {
    return {
        tabClickIndex: null, // 点击的单元格
        tabClickLabel: '', // 当前点击的列名
    }
},
methods: {
   tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
   },
   // 添加明细原因 row 当前行 column 当前列
    tabClick(row, column, cell, event) {
      switch (column.label) {
        case '原因说明':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '判责金额(元)':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case '备注':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('添加明细原因', this.tabClickIndex, row, column, cell, event)
    },
    // 失去焦点初始化
    inputBlur(row, event, column) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
    },
}

 

转载于:https://my.oschina.net/lemonfive/blog/3079114