element-ui 实战小技巧汇总

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wlangmood/article/details/87970994

一、带有删除操作的Table 表格与分页

1、表格数据只能单选

当前页currentPage,数据tableData

当前页数据只剩1条,删除数据时,需要当前页-1,然后重新刷新数据;

但当当前页为1时,不用-1,只需判断总条数是否大于10来显示与隐藏分页。

if(this.currentPage > 1 && this.tableData.length == 1){
    this.currentPage = this.currentPage - 1
}

2、表格数据可以多选

当前页currentPage,数据tableData,选中项数据multipleSelection

手动添加一个el-table-column,设type属性为selection即可

el-table上监听selection-change(当选择项发生变化时会触发该事件)事件,从而获取multipleSelection的值

handleSelectionChange(val) {
    this.multipleSelection = val;
}

当前页数据和选中数据相同时,删除需要当前页-1,然后重新刷新数据;

但当当前页为1时,不用-1,只需判断总条数是否大于10来显示与隐藏分页。

if(this.currentPage > 1 && this.tableData.length == this.multipleSelection.length){
    this.currentPage = this.currentPage - 1
}

最后需要重新执行调用数据方法,再次获取数据

 

展开阅读全文

没有更多推荐了,返回首页