vue中elementUI的表格实现自定义编辑

此处我使用了mixnis混合
tableEdit.js

// 实现table表格，点击编辑
export const tableEdit = {
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.getElementsByTagName('input')[0].focus()
        // el.focus()
      }
    }
  },
  data() {
    return {
      // 是否编辑的列表
      showEdit: []
    }
  },
  mounted() {
    this.setShowEdit()
  },
  watch: {
    // 监控tableData数据，发生改变的时候跟新单元格显示状态
    tableData: function() {
      this.setShowEdit()
    }
  },
  methods: {
    setShowEditInit() {
      for (const item of this.showEdit) {
        for (const innerItem in item) {
          item[innerItem] = false
        }
      }
    },
    // 设置单元显示转态数据
    setShowEdit() {
      const tempShowEdit = []
      for (const item of this.tableData) {
        const tempShow = {}
        for (const innerItem in item) {
          tempShow[innerItem] = false
        }
        tempShowEdit.push(tempShow)
      }
      this.showEdit = tempShowEdit
    },
    // 切换单元格为编辑
    changeInput(row, column, cell, event) {
      this.setShowEditInit()
      const nowObj = column.property
      const index = this.tableData.findIndex(item => {
        return item.id === row.id
      })
      this.showEdit[index][nowObj] = !this.showEdit[index][nowObj]
    },
    // 失焦
    inputBlur() {
      this.setShowEditInit()
    }
  }
}

在页面中使用

image.png
image.png