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

本文介绍: vue el–table 单机行选中高亮并获取行数据，再次单击取消行选中

1. 效果 展示

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

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

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

2. 代码

2.1 组件代码

table 设置了h i g h li g h t–current–row，可以在选中某个数据行时，高亮该行。

table 设置了@row–click=”handleRowCli c k“，绑定了行点击事件，用于获取被点击的行数据。

table 设置了ref=”table“，用于 script中获取table对象并对其进行操作，通过t h i s.$refs.table即可拿到。

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

  &lt;el-card&gt;
    &lt;el-row&gt;
        &lt;el-button type="primary" plain size="large" :disabled="disableLockReleaseButton"&gt;
          <el-icon size="large"&gt;
            <Lock /&gt;
          </el-icon&gt;
        </el-button>
    </el-row>
    <el-table :data="tableData" stripe style="width: 100%" highlight-current-row @row-click="handleRowClick" ref="table">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </el-card>

2.2 脚本 script

data:

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

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

这里声明了disableLoc kReleaseButton，用于控制按钮是否可用。

methods:

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

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
      }
    },
  }