el-table多选:设置初始勾选状态、跨页保持勾选状态,同时能与一个已选择列表进行动态联动 参考地址:
1. 理解el-table跨页勾选的需求 跨页勾选意味着用户可以在不同的分页中勾选多行数据,并且在切换分页时,之前勾选的行应该保持勾选状态。这通常需要在前端维护一个全局的选中状态数组,并在分页切换时根据这个数组来更新表格的勾选状态。 2. 研究el-table组件的文档 在Element UI的文档中,el-table组件提供了一个...
在vue-elementui中使用el-table,当type="selection"的时候,分页数据进行不同页跳转选择 需要这种功能的时候我们需要在el-table的标签上为每个el-table-column都创建一个id;所以就用到 了row-key="id"这个属性;然后我们就需要在el-table-column为type="selection"添加一个属性 reserve-selection;当这两个属性同时使...
使用el-table 的 selection 选择数据操作,翻页后之前的选中状态就会消失。但是产品需要我们可以选择不同页面的多条数据,然后一起进行批量操作。 基础的跨页选择 认真阅读 el-table 的文档,发现 Element Plus 再一次贴心地替我们考虑了这种场景, 通过下面 2 个属性,就可以实现跨页选择。 就是这么方便! <el-table :...
el-table跨页勾选 <el-table-column type="selection" width="55" :reserve-selection="true" />
vue+el-table实现不同分页面保存勾选数据。 如下图 具体实现步骤如下: 1、在el-table中加入:row-key属性,标记勾选的key 1get_row_key(row) {2//保证是唯一标识符即可3returnrow.id4}, //js 2、使用@selection-change 1addDisSelect(val) {2let select = [];//暂存勾选的数据的id3val.map(id =...
<el-table-column v-if="$route.query.isMult==='many' || multiContractIds.length>0" type="selection" :reserve-selection="true" width="50" align="center" fixed="left" /> </el-table> getRowKey: row => { return row.lngcontractinitid ...