el-table 全选框回显/selection默认选中

vue+elementui
表格的全选框需要做回显效果
页面数据来自接口请求,回显数据来自本地浏览器 sessionStorage

效果如图:
在这里插入图片描述

部分代码:

<--!  添加ref 属性 起名table1 -->
<el-table :data="dataList"     ref="table"     border v-loading="dataListLoading" @selection-change="selectionChangeHandle"      style="width: 100%;" >
      
      <el-table-column prop="id" header-align="center" align="center" label="id">
      </el-table-column>
      
      <el-table-column prop="title" header-align="center" align="center" label="行业/标题">
      </el-table-column>
      ……
      
<el-table/>
	 	// 获取数据列表
      getDataList() {
      
		//post接口请求
		……
		
        }).then(({
          data
        }) => {
          // 数据列表
           this.dataList = data.list
            

        }).then(() => {
			// 回显数据
          var industMenuEntities = JSON.parse(sessionStorage.getItem("industMenuEntities"))
          
          for (let i = 0; i < this.dataList.length; i++) {
            for (let j = 0; j < industMenuEntities.length; j++) {
              if (this.dataList[i].id == industMenuEntities[j].id) { //根据id做比较 决定是否回显
                // 这里放进$refs.table1.toggleRowSelection的回显数据必须和数据列表 数据字段完全相同才行    并且字段值完全相等的才会选中

                this.$refs.table1.toggleRowSelection(this.dataList[i], true);

              }
            }
          }


        })
      },

也可以是
this.$refs.table1.toggleRowSelection ( industMenuEntities [ j ] , true );
但是我的回显数据做过处理,缺了字段,所以踩了个坑,这里只拿它的id值做比较,存进去的还是列表的原数据

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值