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);
        }
    }
}
参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

chenxiaoyi0207

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值