element-ui 实战小技巧汇总

一、带有删除操作的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
}

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