问题
最近在做一个新建与编辑群组的功能。
这期间碰到了一些问题，总结一下：
- 新建群组时，在当前页选中条目后，跳转下一页后数据会清空。
- 编辑群组时，表格的默认不会自动勾选已有的成员。
- 关闭右侧标签时如何做到与表格数据同步？
1.切页时数据清空问题
通过row-key标记行；通过reserve-selection开启保留选中。它们需要搭配使用：
<el-table ... :data="tableData" :row-key="getRowKeys">
<el-table-column type="selection" :reserve-selection="true"/>
data(){
return{
tableData:[],//当前页的表格数据
selectedList:[],//已勾选的人员数据
getRowKeys(row) {//记录每行的key值
return row.id;
},
}
},
最后通过handleSelectionChange来保持数据同步：
<el-table ... @selection-change="handleSelectionChange">
handleSelectionChange(val){
this.selectedList=val
},
2.渲染表格默认状态问题
data(){
return{
origin_ids:[],//默认人员id
tableData:[],//当前页的表格数据
selectedList:[],//已勾选的人员数据
total:0,//表格数据的总条数
pageSize:10,//一页所容纳的条数
start:0,//0为关闭状态，1为最初的打勾状态，2表示结束
}
},
在开始编辑时，首先要知道编辑的群组最开始有哪些成员，才能对表格进行默认状态的渲染：
async getOwnGroup(){
//发送请求-获取当前群组的默认信息...
this.origin_ids=res.data.staff.map(item=>item.id)//数组
},
获取当前页数据，通过切页或调用时触发：
async queryList(page){
//发送请求-获取当前页的人员信息...
this.tableData = Array.from(res.data.data);//当前页数据
this.total=res.data.total
},
接着根据origin_ids在表格勾选成员。然而实际上只能勾选当前页的成员，即如果默认成员不在当前页出现，就无法勾选，导致默认数据缺失。
（解决问题1的基础上）我的想法是，先把每一页都翻一遍，把默认成员在表格中勾选上，再配合handleSelectionChange就能在勾选的同时把数据添加进this.selectedList：
async requestAllPages(){
await this.queryList(1)//主要用于获取全部条目数与每页所容纳的条数
let count=Math.ceil(this.total/this.pageSize)//计算有几页
this.start=1 //进入默认勾选模式
//不止一页时：
if(count>1){
for(let i=2;i<count+1;i++){
await this.queryList(i)//从第二页开始勾选
}
await this.queryList(1)//最后回到第一页
//只有一页时：
}else{
await this.queryList(1)
}
this.start=2//结束默认勾选模式
},
回到<el-table>，给它加上ref，之后使用自带的toggleRowSelection方法进行勾选：
<el-table ref="multipleTable">
async queryList(page){
////发送请求获取当前群组的默认信息
//...
//进入默认勾选模式时:
if(this.start==1){
this.tableData.map(item=>{
//如果这一页有一条id能在origin_ids（默认成员id）中找到，勾选上这一条。
if(this.origin_ids.findIndex(id=>id==item.id)!==-1){
this.$refs.multipleTable.toggleRowSelection(item,true);
}
})
}
},
最后：
async created(){
await this.getOwnGroup()//获取当前群组信息
await this.requestAllPages()//获取每一页
},
3.关闭标签问题
右侧的标签也是根据this.selectedList遍历的：
<el-tag
v-for="tag in selectedList"
:key="tag.id"
@close="closeTag(tag)"
closable>
{{tag.username}}
</el-tag>
（解决问题1的基础上）所以表格的item与标签的tag数据实际上是等同的，现在只需调用toggleRowSelection就能实现同步：
closeTag(tag){
this.$refs.multipleTable.toggleRowSelection(tag,false);
},