前端element-plus表格分页

element-plus 前端表格分页

实现思路：

1.定义三个变量

        tableData：存储所有表格数据

        transferData：存储筛选操作之后的数据

        tableShowData：存储当前页需要展示的数据

2.获取每页数据(transferData=>tableShowData)

for (
    let i = (currentPage4.value - 1) * pageSize4.value;
    i < currentPage4.value * pageSize4.value;
    i++
  ) {
    if (transferData.value[i]) {
      tableShowData.value.push(transferData.value[i]);
    }
  }

const tableShowData = computed({
  get() {
    return transferData.value.slice(
      (currentPage4.value - 1) * pageSize4.value,
      currentPage4.value * ppageSize4.value
    );
  },
  set(value) {},
});

3.添加表格可能用到的筛选，排序，多选等功能。

        1.筛选：添加@filter-change=”handleFilterChange”方法。

        handleFilterChange(filter);

const fliterHandLerData: any = ref([]);//保存筛选后的数据
  let emitObj: any = {};//保存筛选条件
  emitObj = _.cloneDeep(filter);//获取筛选条件（filter函数参数）
  if (emitObj[Object.keys(emitObj)[0]].length > 0) {//判断是否需要进行筛选
    for (let item in emitObj) {//循环筛选条件
      tableData.value.forEach((oitem) => {//循环原始数据每条数据
        if (emitObj[item].includes(oitem[item])) {//判断指定字段这时候符合条件
          fliterHandLerData.value.push(oitem);//附和则保存该条数据
        }
      });
    }
    transferData.value = fliterHandLerData.value;//将所有符合条件的数据存放到筛选后的变量中
  } else {//没有筛选或者点击重置的时候直接赋值筛选变量所有数据
    transferData.value = tableData.value;
  }

        2.排序 @sort-change=”sortChange”   

        sortChange = ({ column, prop, order }) =>{}

if (order == "ascending") {
    //升序
    transferData.value.sort((a: any, b: any) => {
      return a[prop] - b[prop];
    });
  } else if (order == "descending") {
    //降序
    transferData.value.sort((a: any, b: any) => {
      return b[prop] - a[prop];
    });
  }

        3.全选通过toggleRowSelection，toggleAllSelection，clearSelection完成全选，清楚全选，选中某条数据操作。

4.完整代码示例

  
  
    
    
    
    
  
  




.box {
  width: 300px;
}
.pieChart {
  width: 400px;
  height: 400px;
}