el-table点击单元格自动聚焦可编辑，且失去焦点即修改成功的实现方法

前言

最近做的一个表格，有改某个单元格的需求，经过研究完美实现此功能，以下简要介绍下实现过程:

所用前端工具

element-ui官方文档
vue官方文档

效果图

效果图.gif

实现过程

export default {
  data () {
    return {
      dataList: [],
      loadingFlag: true
    }
  },
  components: {
    PageTitle
  },

  directives: {
    focus: {
      inserted: function (el) {
        el.querySelector('input').focus()
      }
    }
  },

  created () {
    this.getList()
  },

  methods: {
    getList () {
      this.$http.get('/list').then(res => {
        if (res.status === 200) {
          this.loadingFlag = false
          this.dataList = res.data.map(item => {
            return {...item, isSelected: false}
          })
          console.log(this.dataList)
        }
      })
    },

    selectChange (e) {
      console.log(e)
    },

    focusEvent (row) {
      row.oldName = row.name
    },

    blurEvent (row) {
      row.isSelected = !row.isSelected
      if (row.name !== row.oldName) {
        // 。。。此处代码省略（调用修改名称接口）
        this.$message({
          message: '修改成功',
          type: 'success',
          duration: 1000
        })
      }
    },

    cellClick (row) {
      row.isSelected = !row.isSelected
    }
  }
}

内容详解

• methods中getList方法在拿到后台数据后给数组对象每一项中添加了同一个属性isSelected,即：

this.dataList = res.data.map(item => {
   return {...item, isSelected: false}
})

• 有了isSelected属性后我们可以控制每一项名称的和

  标签的显示隐藏，从而来实现点击单元格即自动聚焦修改名称

• focusEvent方法是为了记录用户聚焦该行前，该行的name值：

focusEvent (row) {
   row.oldName = row.name
},

• 失去焦点时，比较oldName和name是否相同

blurEvent (row) {
  // 目的是为了让标签隐藏
  row.isSelected = !row.isSelected
  if (row.name !== row.oldName) {
    // 。。。此处代码省略（调用修改名称接口）
    this.$message({
      message: '修改成功',
      type: 'success',
      duration: 1000
    })
  }
},

• 接下来要讲为什么要用自定义指令v-focus，当给标签添加autofocus发现无效，然后看到网上提供的思路遂使用vue框架提供的directives：

directives: {
  focus: {
    inserted: function (el) {
      el.querySelector('input').focus()
    }
  }
},

• 目的就是为了在点击

  标签的同时，显示标签并使其聚焦

• 这里说明一下cellClick事件之所以加在

  标签上是防止点击时也触发cellClick事件,如果加在它们的父级上会出现我说的这种情况。

版权声明：本文为CSDN博主「宝贝QY」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_36070288/article/details/103977413