@lkadmin/table

二次封装element-plus的Table，提供灵活的配置项

简体中文

开发初衷

element-plus Table 的Table-column属性目前只能写在<template></template>模版里，非常不灵活，表格列可以通过数组的形式配置，如果表格的column足够多，代码写、看起来很臃肿，但element-plus Virtualized Table 可配置性就很高，为了保持统一，将Table二次封装，新增bingForm，bindUrl，hasPage用于配置分页

安装

npm install @lkadmin/table
# or
yarn add @lkadmin/table
# or
pnpm add @lkadmin/table

CDN

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@lkadmin/table/dist/style.css" />
<script src="//cdn.jsdelivr.net/npm/@lkadmin/table"></script>
<!-- or -->
<link rel="stylesheet" href="//unpkg.com/@lkadmin/table/dist/style.css" />
<script src="//unpkg.com/@lkadmin/table"></script>

用法

局部注册（单文件）

import "@lkadmin/table/dist/style.css";
import { LkTable } from "@lkadmin/table";

<lk-table locale="zhCn" :data="dataList" :columns="columns" :pagination="pagination"></lk-table>

全局注册（main.ts）

import { createApp } from "vue";
import App from "./App.vue";

import "@lkadmin/table/dist/style.css";
import LkTable from "@lkadmin/table";

const app = createApp(App);

app.use(LkTable, { locale: "zhCn" }).mount("#app");

Volar支持

如果您在使用 Volar，那么可以在 tsconfig.json 中配置 compilerOptions.types 来指定全局组件类型（尤其是全局注册时要想获得类型提示就需要加上下面配置）

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["@lkadmin/table/volar"]
  }
}