el-table默认勾选行数据功能

实现功能：

进入选择页面时，默认勾选已经选过的数据。

实现效果图：

主要技术点：

使用到的属性：

1. row-key
2. reserve-selection
3. el-table-column列为type="selection"的复选框

使用到的方法：

1. toggleRowSelection

关键代码-table组件：

<template>
	<el-table
      ref="table"
      :row-key="id"
      v-loading="loading"
      element-loading-text="数据加载中"
      :data="tableData"
      highlight-current-row
      :show-summary="showSummary"
      :summary-method="getSummaries"
      show-overflow-tooltip
      :pager-count="pagerCount"
      :row-class-name="rowClassName"
      :cell-style="{ padding: 0 }"
      :row-style="{ height: '39px' }"
      style="width: 100%"
      :height="tableH"
      :default-sort="defaultSort"
      @selection-change="handleSelectionChange"
      @select="select"
      @sort-change="sortChange"
    >
      <!-- 勾选框 -->
      <el-table-column
        v-if="checkSelection"
        :reserve-selection="reserveSelection"
        type="selection"
        width="50"
        :selectable="checkSelectSet"
        fixed
      />
      <!-- ...省略组件其他代码... -->
   </el-table>
</template>

<script>
export default {
	methods: {
		toggleSelection(rows) {
      		if (rows) {
        		rows.forEach((row) => {
         		 this.$refs.table.toggleRowSelection(row, true);
        		});
     		 } else {
       		 	this.$refs.table.clearSelection();
      		}
    	}
	}
}
</script>

关键代码-页面中：

<template>
	<baseTable
          ref="baseTableRef"
          :loading="loading"
          :columns="columns"
          :tableData="tableData"
          :total="total"
          :tableH="tableH"
          :checkSelection="true"
          :reserveSelection="true"
          :queryParams="queryParams"
          @getList="getList"
          @selectionChange="selectionChange"
        >
          <!-- ...中间插槽代码省略... -->
     </baseTable>
</template>

<script>
export default { 
	methods: {
		// 获取table列表数据后默认勾选中数据
		getList() {
      		this.loading = true;
      		const data = {
        		// ...省略参数...
      		};
      		// apiMethod 调用api
      		apiMethod(data).then((res) => {
        		this.loading = false;
        		this.tableData = res.rows;
        		this.total = res.total;

        		// equipWhiteScope记录表单中需要默认勾选的id串（像：881800,890743）
        		const validIds = new Set(
          		this.equipWhiteScope?.split(",").map((item) => item.trim())
        		);
        		// 对需要勾选的id串处理成对象结构，存储到validIds中 （{'881800', '890743'}）
        		const selectTable = this.listData.tableData.filter((item) =>
          			validIds.has(item.id)
        		);
        		// selectTable 过滤出来需要勾选的table数据

        		this.$nextTick(() => {
          			if (this.$refs.baseTableRef?.toggleSelection) {
            			// 调用table组件的自定义方法toggleSelection
            			this.$refs.baseTableRef.toggleSelection(selectTable);
          			}
        		});
      		});
    	}
	}
}
</script>