博客

1.引入element-plus组件库（按需引入或全局引入）

(3条消息) vue3 Element-plus 的配置（按需引入，完整引入）_栀暖__的博客-CSDN博客

2.简单使用

<template>
  <el-table :data="tableData（--调接口得来的表格数据数据--）" style="width: 100%">
    <el-table-column prop="date（--每一列的数据--）" label="Date（--表头列提示--）" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

接口的数据及数据类型

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

 <el-table  stripe :data="list（调接口得来列表数组）" height="100%">
        <el-table-column label="操作类型">
        //插槽的使用 scoped 是插槽得到的数据（得到的是一行的所有数据）
          <template #default="scoped">
        //使用的时候 从一行里拿想要的列数据，并做相关判断
            {{ scoped.row.type == "update" ? "修改" : "新增" }}
          </template>
        </el-table-column>
        //不需要做判断的直接写
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="审批状态">
          <template #default="operate">
            <el-tag v-if="operate.row.status === 0">审批中</el-tag>
            <el-tag v-else-if="operate.row.status === 1" type="success"
              >审批通过</el-tag
            >
            <el-tag type="danger" v-else>审批拒绝</el-tag>
          </template>
        </el-table-column>
      </el-table>

4.分页

 <el-pagination
        background
        class="pagination"
        :total="total"（定义变量total去承接接口传过来的 数据总条数）
        v-model:page-size="pageSize"（每页的条数）
        v-model:current-page="currentPage"（当前页）
        :page-sizes="[10, 30, 50, 100]"（分页间隔）
        @size-change="handleSizeChange"（pageSize变化时间）
        @current-change="handleCurrentChange"（当前页变化事件）
        layout="total, sizes, prev, pager, next, jumper"
      />

 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);
      },