vue2版本elementUI的table分页实现多选逻辑

news2025/4/1 23:38:52

1. 需求

我们需要在表格页上实现多选要求，该表格支持分页逻辑。

2. 认识属性

表格属性

参数	说明	类型	可选值	默认值
data	显示的数据	array	—	—
row-key	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。	Function(row)/String	—	—

表格事件

事件名	说明	参数
selection-change	当选择项发生变化时会触发该事件	selection

表格方法

方法名	说明	参数
clearSelection	用于多选表格，清空用户的选择	—
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）	row, selected
toggleAllSelection	用于多选表格，切换所有行的选中状态	-

表格列属性

参数	说明	类型	可选值	默认值
type	对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮	string	selection/index/expand	—
selectable	仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选	Function(row, index)	—	—
reserve-selection	仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）	Boolean	—	false

3. 具体代码

<template>
<div>
	<el-table
		v-if="tableVisible"
	    ref="multipleTable"
	    :data="tableData"
	    tooltip-effect="dark"
	    style="width: 100%"
	    row-key="id"
	    @selection-change="handleSelectionChange">
	    <el-table-column
	      :reserve-selection="true"
          :selectable="judgeSelectable"
	      type="selection"
	      width="55">
	    </el-table-column>
	    <el-table-column
	      label="id"
	      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>
	  <el-pagination
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total,  prev, pager, next, sizes, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
</div>
</template>

  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          name: '王小虎1'
        }, {
          id: 2,
          name: '王小虎2'
        }, {
          id: 3,
          name: '王小虎3'
        }, {
          id: 4,
          name: '王小虎4'
        }, {
          id: 5,
          name: '王小虎5'
        }, {
          id: 6,
          name: '王小虎6'
        }, {
          id: 7,
          name: '王小虎7'
        }],
        multipleSelection: [],
        total: 0,
	    pageSize: 10,
	    pageNum: 1,
		tableVisible: true
      }
    },
	created() {
		this.initData();
	},
    methods: {
		initData() {
			this.getList();
			this.getSelectedList();
		},
		getSelectedList() {
			//	当拿到已选列表时，调用toggleSelection传入已选列表
		},
	    judgeSelectable(row, index) {
	      // 用来区分是否可选
	      return Math.random() > 0.5;
	    },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getList() {
		//	获取数据，更新tableData和total
	  },
	  //  分页size变化
	    handleSizeChange(val) {
	      this.pageSize = val;
	      this.getList();
	    },
	    //  当前页面变化
	    handleCurrentChange(val) {
	      this.pageNum = val;
	      this.getList();
	    },
	    //	必须这么处理
	    toggleSelection(rows) {
	      if (rows) {
	        rows.forEach(row => {
	          this.$refs.multipleTable.toggleRowSelection(row);
	        });
	      } else {
	        this.$refs.multipleTable.clearSelection();
	      }
    	},
		
		//	批量导入或者其他场景下已选数据已更新，就重新处理下页面内容
		regetData() {
			 this.total = 0;
     		 this.pageNum = 1;
     		 this.tableData = [];
     		 this.multipleSelection = [];
			
			this.tableVisible = false;
			
			this.$nextTick(() => {
				this.tableVisible = true;
				this.initData();
			})
		}
    }
  }

4. 解读

分页不需要介绍，主要还是多选说一点。

表格上必须设置row-key，该字段的值不可重复，这样让表格记住每个数据。
selection-change字段用来监听选择变化，因el-table未提供批量选中方法，故只能调组件上的toggleRowSelection方法一个一个选中。如果需要监听selection-change方法变更记录，最好还是防抖处理，避免初始化一个一个选中导致的数据异常。
el-table-column 使用 type 值为 selection, 该组件上需要设置 reserve-selection 为 true，相关属性解说请看2中解释。属性selectable 则是用来控制是否可选，这个业务功能也要了解下。
至于具体逻辑可以参考上面代码，有问题来找我。