elmentUI表格只能选中符合条件的数据

本文使用 elment-UI 组件库中的 tabel 组件来举例
主要实现了选择表格数据时，只能选中符合条件的数据，本文包含完整代码，代码注释

一、完整代码

下面是完整的代码，可以直接复制到.vue文件中查看效果

<template>
  <div>
    <el-card>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 模拟的表格数据
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '翠花',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '翠花',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '张晓强',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '张晓强',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: [] // 表格中选中的数据
      }
    },

    methods: {
      // 取消所有选中
      toggleSelection() {
        this.$refs.multipleTable.clearSelection()
      },
      // 给每一行的数据添加index
      tableRowClassName({row, rowIndex}) {
        row.index = rowIndex
      },
      // 选择数据
      handleSelectionChange(val) {
        // 选择的第一个数据的姓名
        this.multipleSelection = val
        if(this.multipleSelection.length != 0){
          let filter = this.multipleSelection[0].name
          this.multipleSelection.forEach(item => {
            if(item.name != filter){
              this.$refs.multipleTable.toggleRowSelection(this.tableData[item.index])
            }
          })
        }
      }
    }
  }

</script>

<style></style>

二、代码中的一些方法的注释

1. 代码里的:row-class-name="tableRowClassName"以及 tableRowClassName函数，是为了给每个表格数据添加一个index，在选择表格数据时将不符合条件的选项状态改变成不选中，就是依据index，下图可见：

2. 每个数据有了index以后，我们这里直接在handleSelectionChange函数里面写代码做操作，这里我们设置的过滤条件是：选中的第一个数据的姓名，与这个姓名相同的就可以选中

handleSelectionChange(val) {
    this.multipleSelection = val
    // 确认有选中的数据
    if(this.multipleSelection.length != 0){
      // 过滤条件 = 选中的的第一个数据的姓名
      let filter = this.multipleSelection[0].name
      this.multipleSelection.forEach(item => {
        if(item.name != filter){
          // 使用toggleRowSelection切换选中状态
          this.$refs.multipleTable.toggleRowSelection(this.tableData[item.index])
        }
      })
    }
  }

3. 比如第一个选中的姓名是‘王小虎’，那filter就等于‘王小虎’，表格就只能选中姓名为‘王小虎’的选项，下图可见：