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方法用于获取默认选中的节点

  1. 给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中剔除

el-table中如何去保存用户选中的状态并且分页和搜索后仍然存在2.初始化的时候选中默认需要选中的节点getHasAssignCompany方法用于获取默认选中的节点关键需要判断用户的点击是选中还是取消选中可以通过用户当前点击的行row和点击后selection中是否包含当前行来判断如果是选中那么就往selectList中push当前row如果是取消选中那么就从selectList中剔除当前点击的行row......
关于回显的处理element 中Table Methods 有一个方法 toggleRowSelection 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) 设置某一行选中 (这里是vue3) table.value.toggleRowSelection(item) 设置某一行不选中 table.value.toggleRowSelection(item,false) 下面是完整代码 <template>
取消 `el-table` 的选中状态有不同的方法,具体取决于您的需求和实现方式。以下是一些可能的方法: 1. 使用 `clearSelection` 方法:在 `el-table` 组件中使用 `ref` 属性创建一个引用,然后在需要取消选中状态时调用该引用的 `clearSelection` 方法。 ```html <el-table ref="myTable" :data="tableData" @selection-change="handleSelectionChange"> <!-- 表格列定义 --> </el-table> ```js // 在需要取消选中状态的时候调用该方法 this.$refs.myTable.clearSelection(); 2. 通过修改 `el-table` 的 `row-key` 属性:将 `el-table` 的 `row-key` 属性设置为一个始终返回 `undefined` 的函数,这样表格就不会为任何行设置选中状态。 ```html <el-table :data="tableData" :row-key="() => undefined" @selection-change="handleSelectionChange"> <!-- 表格列定义 --> </el-table> 3. 通过修改 `el-table` 的 `highlight-current-row` 属性:将 `el-table` 的 `highlight-current-row` 属性设置为 `false`,这样表格就不会为当前行设置选中状态。 ```html <el-table :data="tableData" :highlight-current-row="false" @selection-change="handleSelectionChange"> <!-- 表格列定义 --> </el-table> 请根据您的实际情况选择适合您的方法。