vue el-table 单机行选中高亮并获取行数据,再次单击取消行选中

 1. 效果展示

当没有行被选中时,按钮是不可用的

vue el-table 单机行选中高亮并获取行数据,再次单击取消行选中_第1张图片

 当有行被选中时,该行高亮,同时按钮可用

vue el-table 单机行选中高亮并获取行数据,再次单击取消行选中_第2张图片

 再次点击该行,取消高亮,按钮不可用

 vue el-table 单机行选中高亮并获取行数据,再次单击取消行选中_第3张图片

2. 代码

2.1 组件代码

table设置了highlight-current-row,可以在选中某个数据行时,高亮该行。

table设置了@row-click="handleRowClick",绑定了行点击事件,用于获取被点击的行数据。

table设置了ref="table",用于script中获取table对象并对其进行操作,通过this.$refs.table即可拿到。

另外这里放了一个button,绑定了一个属性disabled,当有数据行被选中时,按钮才可用。

  
    
        
          
            
          
        
    
    
      
      
      
    
  

2.2 脚本script

data:

这里表格绑定的数据对象tableData是写死的,实际可以根据需求从后端获取。

这里声明了currentRowObj,用于保存选中的行内容。

这里声明了disableLockReleaseButton,用于控制按钮是否可用。

methods:

实现行点击事件的方法,入参有三个row,event,column,这里根据前面全局定义的currentRowObj和当前点击的行row进行比较,如果相同,说明点击了同一行,则取消该行选中,清空currentRowObj;否则,保存当前点击行rowcurrentRowObj

data() {
    return {
      tableData: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-04',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-01',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ],
      currentRowObj: undefined,
      disableLockReleaseButton: true,
    }
  },
  methods: {
    // 处理行点击事件
    async handleRowClick(row, event, column) {
      if (this.currentRowObj == row) {
        console.log('再次点击同一行,取消当前行选中')
        // 取消当前行选中,清空保存的当前行数据
        this.$refs.table.setCurrentRow()
        this.currentRowObj = undefined
        // 此时没有行被选中,控制按钮不可用
        this.disableLockReleaseButton = true
      } else {
        console.log('点击新行,选中并高亮该行,获取当前行数据')
        this.currentRowObj = row
        // 此时有行被选中,控制按钮可用
        this.disableLockReleaseButton = false
      }
    },
  }

3. 小结

网上查了很多资料,各种办法都试了,都不行,可能与插件版本、环境等各种因素有关。

最终本文尝试出该方法可以解决单机行选中,再次单击取消选中的问题。

如果本文的方法不能解决你的问题,可以参考我之前查阅过的资料。

el-table 高亮取消选中-掘金 (juejin.cn)

Vue elementui table单选 - 掘金 (juejin.cn)

聊一聊el-table勾选复选框时高亮行,行选中时勾选复选框的问题! - 掘金 (juejin.cn)

你可能感兴趣的:(前端,javascript,typescript,elementui,vue.js)