问题一:为实现分页记忆选中项,但实际获取数据后this.$refs.xxx.toggleRowSelection函数无效

 自“前端开发终生学习者”的《获取数据后this.$refs.xxx.toggleRowSelection无效》 方法:获取数据后在外部加上一个$nextTick即可

原因:$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

elementUi分页和mybatisPlus element ui分页问题_分页

问题二:排序只在当前页的表格数据中排序

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);
        }
    }
}