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()
    }
  }
}

在頁面中使用