element-plus table 表格 及 分页

1.引入element-plus组件库（按需引入或全局引入）(3条消息) vue3 Element-plus 的配置（按需引入，完整引入）_栀暖__的博客-CSDN博客

2.简单使用

接口的数据及数据类型 

 

 

3.涉及到判断以后再填数据，就用到插槽，与三元运算

 

 
        
        //插槽的使用 scoped 是插槽得到的数据（得到的是一行的所有数据）
          
        
        //不需要做判断的直接写
        
        
          
        
      

4.分页

 handleSizeChange: (val: number) => {
        console.log("handleSizeChange", val);
        responsive.pageSize = val;
        methods.getHistory();//调接口
      },
      handleCurrentChange: (val: number) => {
        console.log(`current page: ${val}`);
        responsive.currentPage = val;
        methods.getHistory();//调接口
      },

这是我自己看的，封装接口，调接口

// 获取历史记录列表
export const getHistoryApi = async (searchForm: {
  page: number;
  size: number;
  userId: string;
}): Promise<{
  list: {
    createTime: string;
    initiator: string;
    initiatorId: string;
    processInstanceId: string;
    status: number;
    tstatus: boolean;
    type: string;
  }[];
  total: number;
}> => {
  const response: responseInter = await request({
    url: "/getHistoryData",
    method: "post",
    data: searchForm,
    withoutApiString: true,
  });
  if (response.code === "SUCCESS") {
    return {
      list: response.result.list,
      total: response.result.total,
    };
  } else {
    return {
      list: [],
      total: 0,
    };
  }
};

     getHistory: async () => {
        const response = await getHistoryApi({
          page: responsive.currentPage,
          size: responsive.pageSize,
          userId: ticketStore.userId,
        });
        console.log("response", response);
        responsive.total = response.total;

        responsive.list = Array.from(response.list);
        console.log("responsive.list", responsive.list);
      },