基于Vue 3.2 + Element-plus进行组件的二次封装

<SdsnTable
row-key="id"
:data="records"
ref="tableRef"
:columns="columns"
stripe
size="small"
:hasPage="false"
:show-overflow-tooltip="true"
:formatRecords="formatData"
:props="{
    page: {
    page: '_page',
    pageSize: '_per_page'
    }
}"
>
    <template #file_id="{ row }">
        <el-link :underline="false" type="primary" @click="viewMaterial(row)">{{ row.file_id }}</el-link>
    </template>
</SdsnTable>

script

// 请求数据
// refresh 刷新 ，可传查询参数
const { records, tableRef, refresh } = useTable({
  recordsFn: new Promise((resolv)=>{
    resolv({
        code:200,
        data:[],
        total:0,
        msg:"ok!"
    })
  }),
  params: getParams, // 请求参数
  isAutoLoad: false // 是否进入页面自动加载一次
});

// 自定义列
const columns = [
  { label: "ID", slot: "file_id", width: 60 },
  { label: "姓名", prop: "name", width: 102, align: "center" },
];

// 如果返回的结构不一致，可自定义
function formatData(data: any) {
  return {
    data: data.records,
    total: data.total
  };
}