Element-ui el-table组件选中回显

开发中使用Element-ui 的table组件进行开发，遇到了组件回显的需求，简要记录一下

Demo

直接上代码

实现的关键点

组件API重点

Table Attributes

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

Table-column Attributes

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

Table Methods

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

回显细节

1. 从tableData的数据里找对应的进行回显

组件存储选中的值 和 需回显的数据结构会有些许不一样（具体为什么，求大佬指教），导致toggleRowSelection不生效，故此从data里取值去做回显

const idList = this.multipleSelection.map((e) => e.id)

this.tableData.forEach((row) => {
	if (idList.includes(row.id)) {
   	this.$refs.multipleTable.toggleRowSelection(row, true)
  }
})

1. toggleRowSelection 被动触发selection-change事件的解决方案

场景：接口返回的数据需要列表默认选中，需要调用toggleRowSelection方法，但由于非当前页数据不在数据项内，toggleRowSelection默认触发select事件导致多选数组非当前页数据被干掉

解决方案：加锁

注：selectData 触发时机，还请根据业务需求来

考文献：

el-table toggleRowSelection被动触发select/selection-change事件的解决方案-CSDN博客

vue + elementUI 表格多选框选中 回显_vue+elementui ,编辑添加的表格数据显示选中-CSDN博客