问题一:为实现分页记忆选中项,但实际获取数据后this.$refs.xxx.toggleRowSelection函数无效
自“前端开发终生学习者”的《获取数据后this.$refs.xxx.toggleRowSelection无效》 方法:获取数据后在外部加上一个$nextTick
即可
原因:$nextTick
是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick
,则可以在回调中获取更新后的 DOM
问题二:排序只在当前页的表格数据中排序
1.不分页的情况下排序:
方法一:通过$refs.table动态修改default-sort的值
方法二:给对应列头添加sortable
2.分页的情况下排序:
方法一:
1.对应列设置sortable=“custom”;
2.el-table属性里设置sort-change方法,如按年龄排序我们设置@sort-change=“handleAgeSortChange”;
3.在handleAgeSortChange函数中:
(1)设置boolean类型的flag标志当前是否正在排序中,使得分页时可以进行判断是否正在排序,若正在排序则按排序得到的结果进行页码跳转,若没有正在排序则按照所有数据原来的顺序进行页码跳转;
(2)将原来的所有数据进行拷贝,使用拷贝数据来冒泡排序;
(3)将排序后的拷贝数据作为参数传参给为表格赋值的函数。
4.这样有点小问题:点击排序图标时,是按照降序、升序、不排序这样的图标顺序显示的,我这个方法就和图标显示不匹配了。其实可以改进flag的值,写成desc,asc,nosort这样的内容循环取值。
问题三:toggleRowSelection函数参数
toggleRowSelection的第一个参数需要填写table引用的data的数据,比如tableData[3]这样的数据toggleRowSelection函数才能在表格中找到。
原因:应该是toggleRowSelection函数原理不是在表格数据中查找相等的数据,而是找到指向表格数据存放地址的索引。
问题四:type=selection的坑
方法一:可以自己写复选框
<el-table-column>
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked"></el-checkbox>
</template>
</el-table-column>
方法二:用flag标记当前行是否被选中
//copyChooseTchIds为data定义的存放保存选中的行。
selectChange(val, row){
/* 1 => add ; 0 => remove*/
let flag = 0;
for(let i in val){
if(row.id === val[i].id){
flag = 1
break;
}
}
if(flag === 1){
this.copyChooseTchIds.push(row);
}
else{
for(let i in this.copyChooseTchIds){
if(this.copyChooseTchIds[i].id == row.id)
this.copyChooseTchIds.splice(i, 1);
}
}
}