项目需求:
表格中添加全选功能,然后还要单独点击的时候进行一个请求,后台判断是否可以选中。点击全选的时候不进行判断是否可以选中,并且有分页切换时要记住上一页选中的数据。
解决方法:
1.单独点击进行校验使用select事件:
<el-table :data="tableData" style="width: 100%" @selection-change="selectionChange" ref="table" :border="border" @select="selectionRowChange" @select-all="selectAll" :row-key="rowKey">
//在这里要清楚selection-change事件在多选和全选的时候都会触发,select-all事件是只有在全选的时候会触发。
// 多选、全选
selectionChange(val) {
console.log(val);
},
// 手动勾选行内数据
selectionRowChange(val,row) {
console.log(val,row);
},
//全选触发
selectAll(val){
console.log(val);
},
2.分页记住之前选中的数据使用row-key
如果你的表格是定义的组件那你的row-key不能写死,要定义成一个参数例如:
<el-table :data="tableData" ref="table" :row-key="rowKey">
</el-table>
//rowKey的定义,这里要注意的是row-key是一个函数
export default {
data() {
return {
}
},
props: {
rowKey: {
type: Function,
default: () => {}
},
},
}
//在调用这个组件的时候要给rowkey传值:
<table-content
ref="listPowerSupplyTab"
:tableTitle="tableOrgTitle"
:tableData="orgTableData"
:rowKey="(val)=>{ return val.orgCode}"
>
</table-content>
如果只是单一的一个表格不是一个组件你可以直接写死
<el-table :data="tableData" ref="table" row-key="id">
</el-table>
如果我们在刚开始的时候要默认的是选中状态的时候,可以使用toggleRowSelection()函数:
this.orgTableData.forEach(row => {
this.$refs.listPowerSupplyTab.$children[0].toggleRowSelection(row);
})
但是我在这样写的时候遇到一个Bug就是我的表格是在弹框里面的,我要在弹框加载前是获取不到this.$refs.listPowerSupplyTab
,经过查找发现:
ref 注册时间的重要说明:因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!$refs
也不是响应式的,因此你不应该试图用它在模板中做数据绑定。
ref 只有等页面加载完成好之后你才能调用 this.$refs
,如果你使用v-if 、v-for
渲染页面的话,那么在刚开始页面没没渲染之前你是拿不到this.$refs
的,所以要等到页面渲染之后拿才可以。
之后查找发现使用this.$nextTick(()=>{ })
可以解决。
this.$nextTick(() => {
this.orgTableData.forEach(row => {
this.$refs.listPowerSupplyTab.$children[0].toggleRowSelection(row);
})
})
最后实现效果:
点击下面的删除按钮,取消选中状态可以使用toggleRowSelection()函数:
delete(data) {
this.orgNameList.forEach((item, index) => {
if (item.orgCode == data.orgCode) {
this.orgNameList.splice(index, 1);
}
});
//设置false就可以取消选中状态
this.$refs.listPowerSupplyTab.$children[0].toggleRowSelection(data,false);
},