Element ui实现tabel分页选中记忆功能

最新推荐文章于 2024-04-23 10:34:10 发布

置顶 qq_42260463

最新推荐文章于 2024-04-23 10:34:10 发布

阅读量568

点赞数

本文链接：https://blog.csdn.net/qq_42260463/article/details/108713618

版权

敲重点： :row-key=“getRowKeys”、:reserve-selection=“true” 、 type=“selection” 三者连用及可
1 、row-key ：行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。
2、reserve-selection：仅对 type=selection 的列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）

 <el-table :data="infoLists" ref="multipleTable" :row-key="getRowKeys" :header-cell-style="headerStyle" border
                @select="handleSelectionChange">
        <el-table-column type="selection" :reserve-selection="true" width="55"></el-table-column>
        <el-table-column prop="productName" label="产品名称"></el-table-column>
        <el-table-column prop="productNumber" label="产品型号"></el-table-column>
        <el-table-column prop="productType" label="产品类型"></el-table-column>
        <el-table-column prop="productPrice" label="价格">
          <template slot-scope="scope">
            <span v-show="!empty(scope.row.productPrice)">￥{{scope.row.productPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="productImg" label="产品图片">
          <template slot-scope="scope">
            <van-image width="80" height="80" fit="cover" :src="scope.row.productImg"></van-image>
          </template>
        </el-table-column>
      </el-table>

getRowKeys(row) {
                return row.productId
},

let flag = list.some(v => v.productId == row.productId)  //  用于判断当前项选中状态，true-选中、false-取消  判断条件根据自己需求改动

handleSelectionChange(list, row) {
                let flag = list.some(v => v.productId == row.productId)
                if (flag) {
                    this.empty(this.form1.productList) ? this.form1.productList = list
                        : this.form1.productList = this.form1.productList.concat(row)
                } else {
                    this.form1.productList = this.form1.productList.filter(v => v.productId != row.productId)
                }
},

 // 设置默认选中的 （在获取分页数据及打开弹窗时调用 this.infoLists为可勾选列表）
            setSelectRow() {
                if (!this.dialogVisible) {
                    return
                }
                if(!this.empty(this.infoLists)){
                    this.infoLists.forEach(row=>{
                        this.$refs.multipleTable.toggleRowSelection(row, false)
                    })
                }
                if (!this.empty(this.form1.productList)&&!this.empty(this.infoLists)) {
                    this.form1.productList.forEach(row=>{
                        this.infoLists.forEach(trow=>{
                            if(row.productId == trow.productId){
                                this.$refs.multipleTable.toggleRowSelection(trow, true)
                            }
                        })
                    })
                }
            },