vue+element ui 分页表格操作的坑

问题一：为实现分页记忆选中项，但实际获取数据后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);
        }
    }
}