element 中 Table分页回显勾选数据

配合row-key -->行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下来进行回显
一 html

 <el-table :data="dataList" :row-key="getRowKeys" stripe border ref="multipleTable" tooltip-effect="dark" @selection-change="changeFun_good">
      <el-table-column type="selection" :reserve-selection="true" width="55" align="center"></el-table-column>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column> 
      <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
      <el-table-column prop="goodsUnit" label="单位" align="center"></el-table-column>
      <el-table-column prop="purchasePrice" label="单价" align="center"></el-table-column> 
      <el-table-column prop="goodsQuantity" label="库存数量" align="center"></el-table-column>
    </el-table>

二 return

 return {
      getRowKeys (row) {
        return row.id;
      },
      dataList: []
    };

三,methods

    changeFun_good (val) {
      this.chooseData = val;
    },
### element-ui `el-table` 分页多选框勾选解决方案 为了使 `el-table` 的分页功能支持多选框的状态,需设置特定属性并编写相应逻辑处理函数。 #### 设置表格配置项 在 `<el-table>` 组件中加入 `:row-key="record => record.id"` 属性来指定唯一键名作为每一行数据的身份标识符[^2]。这有助于框架识别不同页面间的相同记录条目,从而保持其选择状态不变。 ```html <el-table :data="tableData" border :header-cell-style="headClass" :row-style="{ height: '15px' }" style="width: 100%" @selection-change="handleSelectionChange" ref="multipleTable" :row-key="record=>record.id" tooltip-effect="dark"> </el-table> ``` #### 配置多选列选项 对于包含多选框的第一列表格列定义部分,应增加 `:reserve-selection="true"` 参数以启用记忆上次已选中的项目特性: ```html <el-table-column type="selection" :reserve-selection="true" width="55"> </el-table-column> ``` #### 编写事件处理器 当用户改变当前所选行时触发 `@selection-change` 事件,并通过自定义的方法如 `handleSelectionChange(selection)` 来接收最新的被选中对象数组[^1]。此方法可用于更新内部存储的选择集合并同步至其他组件或服务端接口调用。 ```javascript methods: { handleSelectionChange(selection) { this.selectedRows = selection; console.log('Selected Rows:', JSON.stringify(this.selectedRows)); } } ``` 以上措施共同作用下可以有效解决 `el-table` 中由于翻页操作引起的选择丢失现象,确保用户体验流畅一致。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值