在Element UI的文档中,el-table组件提供了一个reserve-selection属性,该属性可以在el-table-column类型为selection时启用,以保留选中的状态。但是,这仅适用于当前页的数据,对于跨页勾选,还需要额外的逻辑来处理。 3. 设计实现跨页勾选的方案 为了实现跨页勾选,我们可以使用以下方案: ...
1、在el-table中加入:row-key属性,标记勾选的key 1get_row_key(row) {2//保证是唯一标识符即可3returnrow.id4}, //js 2、使用@selection-change 1addDisSelect(val) {2let select = [];//暂存勾选的数据的id3val.map(id => select.push(id.id));//只保留id4this.disAddSelect = [...select...
<el-table ref="table" v-loading="listLoading" :data="tableData" :row-key="getRowKey" border stripe :height="tableHeight" :header-cell-style="{'background':'#F5F4F7'}" @selection-change="handleSelectionChange" > <el-table-column v-if="$route.query.isMult==='many' || multiContract...
ProTable 组件内部暴露了 el-table DOM,可通过 proTable.value.element.方法名 调用其方法。 <template> <el-table ref="tableRef" v-bind="$attrs" > </el-table> </template> <script setup lang="ts" name="ProTable"> import { ref } from "vue"; import { ElTable } from "element-plus"; ...
使用el-table 的 selection 选择数据操作,翻页后之前的选中状态就会消失。但是产品需要我们可以选择不同页面的多条数据,然后一起进行批量操作。 基础的跨页选择 认真阅读 el-table 的文档,发现 Element Plus 再一次贴心地替我们考虑了这种场景, 通过下面 2 个属性,就可以实现跨页选择。
如图: 问题: 当上面的表格翻到第二页的时候,第一页勾选的数据就没有了。 解决办法:给table设置 row-key属性(值是可以唯一标识该条数据的属性),同时给type 为selection的列设置reserve-selection属性为 true。 附上官方文档里的解释: vue中element-ui表格跨页选择解决方案 ...
element-ui 表格跨页多选 实现的效果是,表格可以多选,当点击下一页的时候上一页的数据还在,而且切回去页码之前选的也能回显 贴下代码 关键代码为 table标签的 row-key 和 selection-change,column的 reserve-selection row-key返回当前的唯一标识(例如id) selection-change 直接赋值即可 找了一大圈结果......
element-ui table组件翻页后记录之前页面勾选数据 如图: 问题: 当上面的表格翻到第二页的时候,第一页勾选的数据就没有了。 解决办法: 给table设置row-key属性(值是可以唯一标识该条数据的属性),同时给 type 为selection的列设置reserve-selection属性为 true。 附上官方文档里的解释: ...
这样好像可以实现你的需求
1、row-key="id" 2、reserve-selection 当然你想要获取到选择的数据就需要用到selection-change的这个方法了 接下来咱们说一说这个el-table-column上面使用v-if指令的问题 当我们的每一列错开使用v-if或者判断的时候我们会发现明明排好的列会随意的变动,这个时候我 ...