【vue】表格只能选中符合条件的数据

本文使用 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. 代码中给table设置 :row-class-name="tableRowClassName" 绑定 tableRowClassName 函数，是为了给每个表格数据添加一个index，下图可见：

这里添加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='王小虎' ，表格就只能选中姓名为‘王小虎’的选项，下图可见：