element-ui table表格实现跨页选择数据
element-ui table表格实现跨页选择数据
·
为实现elemeny-ui中table表格可以跨页选择数据做记录
1.在el-table 中添加**@selectiοnchange=“handleSelectionChange”** 和 :row-key=“getRowKeys”
el-table-column 中添加 :reserve-selection=“true” (仅对 type=selection 的列有效,类型为 Boolean,为 true 则会在数据更新之后保留之前选中的数据(需指定 row-key))
<el-table size="mini" :data="dataList" border v-loading="dataListLoading" @selectionchange="handleSelectionChange" style="width: 100%;" :row-key="getRowKeys">
<el-table-column type="selection" width="55" :reserve-selection="true" :selectable='checkboxSelect'> </el-table-column>
<el-table-column prop="name" header-align="center" align="center" label="名称"></el-table-column>
<el-table-column prop="month" header-align="center" align="center" label="月份"></el-table-column>
</el-table>
2.添加handleSelectionChange() 方法,selList为选中的数据
export default {
data(){
return{
selList:[],
getRowKeys(row) {//记录每行的key值
return row.id;
},
}
},
methods:{
handleSelectionChange(rows) {
this.selList = rows;
},
}
}
3.如果需要对选择框进行禁用的话,加上 :selectable=‘checkboxSelect’
<el-table-column type="selection" width="55" :reserve-selection="true" :selectable='checkboxSelect'> </el-table-column>
checkboxSelect(row, rowIndex) {
if (row.status == 2 || row.status == 13 ) {
return true //不禁用
} else {
return false //禁用
}
},
DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。
更多推荐


所有评论(0)