[JavaScript知识库]el-table如何保存用户的选中状态

el-table中如何去保存用户选中的状态并且分页和搜索后仍然存在

1.需要在data中定义一个变量selectedList变量用于保存已选中的行

data(){ 
	return {
		selectedList: []
	}
}

2.初始化的时候选中默认需要选中的节点

mounted(){
getHasAssignCompany() {
      let { expertId } = this.currentRow
      let params = {
        expertId,
        batchId: '1'
      }
      expertHasAssignCompany(params).then(res => {
        let { data } = res
        this.selectedCompanyList = data
        let targetRowList = this.tableData.filter(item => {
          return data.some(it => it.companyId === item.companyId)
        })
        // 选中
        targetRowList.forEach(row=> {
          this.$refs.tableRef.toggleRowSelection(row)
        })
      })
    },
}

getHasAssignCompany方法用于获取默认选中的节点

3. 给table绑定，用户手动选中selection事件

<el-table
 :data="tableData"
 height="500px"
 ref="tableRef"
 border
 style="margin-top: 10px"
 @select="select">

methods: {
	select(selection, row, le) {
      let isSelected = selection.length && selection.some(item => item.companyId === row.companyId)
      // 选中
      if(isSelected) {
        this.selectedCompanyList.push(row)
      }else {
        this.selectedCompanyList = this.selectedCompanyList.filter(item => item.companyId !== row.companyId)
      }
    },
}

关键需要判断用户的点击是选中还是取消选中

可以通过用户当前点击的行row和点击后selection中是否包含当前行来判断
如果是选中那么就往selectList中push当前row
如果是取消选中那么就从selectList中剔除当前点击的行row

最后提交选中行的数据只需要从一开始维护的selectedList数据并且处理成自己期望的数据结构就行了

全选状态按钮的处理

// 点击表格的全选按钮
    selectedAll(selection) {
      if(selection.length) {
        let added = selection.filter((item)=>{
          return !this.selectedCompanyList.some(it => it.companyId === item.companyId)
        })
        this.selectedCompanyList = [...this.selectedCompanyList,...added]
      }else {
        this.selectedCompanyList = this.selectedCompanyList.filter(item => {
          return !this.tableData.some(it => it.companyId === item.companyId)
        })
      }
    },

如果selection不为空那么就证明是全选
我们需要和之前选中的selectedList进行比对，并且找出新增的并添加进去

如果selection为空那么就证明是取消选中，也需要进行比对，将当前的tableData和selectedList进行比对，也就是说要将tableData的数据从selectedList中剔除