tableplus-view

二次封装elementPlus-table组件 使用配置化生成 减少代码量

安装

npm install tableplus-view
pnpm install tableplus-view

使用

全局导入

// 全局导入 main.js
import tablePro from "tableplus-view";
import "/node_modules/tableplus-view/dist/tableplus-view.css";
app.use(tablePro);

局部导入

// 局部导入 App.vue 需要在main.js中导入css文件
import { tablePro } from "tableplus-view";

使用

<script setup>
import { tablePro } from "tableplus-view";
import { h, onMounted, reactive } from "vue";
import { ElButton } from "element-plus";
// 表格数据
const list = [
  {
    id: "1869700462211493890",
    name: "盖伦",
    address: "德玛西亚上城区",
    camp: "德玛西亚",
    beginDate: "2024-12-01",
    endDate: "2025-01-31",
    status: "1",
    createTime: "2024-12-19 19:05:02",
    updateTime: "2025-02-13 16:14:03",
    street: "六星街里",
  },
  {
    id: "1886950786408079361",
    name: "拉克丝",
    address: "德玛西亚上城区",
    camp: "德玛西亚",
    beginDate: "2025-02-01",
    endDate: "2025-02-15",
    status: "1",
    createTime: "2025-02-05 09:31:39",
    updateTime: "2025-02-12 09:55:44",
    street: "六星街里",
  },
  {
    id: "1889199616012587009",
    name: "赵信",
    address: "德玛西亚城中村",
    camp: "德玛西亚",
    beginDate: "2024-09-04",
    endDate: "2024-09-10",
    status: "0",
    createTime: "2025-02-11 14:27:42",
    updateTime: "2025-02-11 14:40:37",
    street: "六星街里",
  },
];
// 分页器配置 组件中不传递pagingData 则不显示分页器
const pagingData = reactive({
  total: 1,
  attr: {
    pageSizes: [10, 20, 30, 40],
    layout: "total, sizes, prev, pager, next, jumper",
  },
  pageObj: {
    pageNum: 1,
    pageSize: 10,
  },
});
const changePage = (row) => {
  console.log("🚀🚀🚀 ~ row:", pagingData);
};
// 控制表头不换行
function renderHeader(data) {
  const column = data.column;
  const span = document.createElement("span");
  span.innerText = column.label;
  document.body.appendChild(span);
  const spanWidth = span.getBoundingClientRect().width + 20; // 考虑到内边距
  column.minWidth = column.minWidth
    ? Math.max(column.minWidth, spanWidth)
    : spanWidth;
  document.body.removeChild(span);
  return column.label;
}
// 表头配置
const columns = [
  // 表格多选 添加这个出现多选框
  {
    label: "",
    type: "selection",
    // selectable(row) {
    // },
  },
  {
    label: "姓名",
    prop: "name",
  },
  // 多级表
  {
    label: "住址",
    prop: "airName",
    children: [
      {
        label: "地区",
        prop: "airName",
      },
      {
        label: "街道",
        prop: "street",
      },
    ],
  },
  {
    label: "阵营",
    prop: "camp",
    renderHeader, // 添加自定义方式
    render(scope) {
      return `${scope.row.camp}&`;
    },
  },
  {
    label: "起始日期",
    prop: "beginDate",
    "show-overflow-tooltip": true,
  },
  {
    label: "终止日期",
    prop: "endDate",
    "show-overflow-tooltip": true,
  },
  {
    label: "操作时间",
    prop: "updateTime",
    "show-overflow-tooltip": true,
  },
  {
    label: "启用状态",
    prop: "status",
    render(scope) {
      return `${scope.row.status == "1" ? "启用" : "禁用"}`;
    },
  },
  // slot插槽方式添加操作列按钮 如果添加了这个配置 需要在组件中添加插槽
  // {
  //   label: "操作",
  //   slot: "editColumn",
  // },
  {
    width: 150,
    label: "操作",
    align: "center",
    render(scope) {
      return h("div", [
        h(
          ElButton,
          {
            type: "primary",
            size: "small",
            style: { color: "#fff" },
            onClick() {
              console.log("处理", scope);
            },
          },
          "修改"
        ),
        h(
          ElButton,
          {
            type: "danger",
            size: "small",
            style: { color: "#fff" },
            onClick() {},
          },
          "删除"
        ),
      ]);
    },
  },
];
</script>
<template>
  <div style="width: 100%">
    <tablePro
      :columns="columns"
      :data="list"
      :pagingData="pagingData"
      @changePage="changePage"
    />
    <!-- 插槽方式 -->
    <!-- <tablePro
      :columns="columns"
      :data="list"
      :pagingData="pagingData"
      @changePage="changePage"
    >
      <template #editColumn="scope">
        <el-button
          type="primary"
          size="small"
          style="color: #fff"
          @click="console.log('处理厂科', scope)"
          >修改</el-button
        >
        <el-button type="danger" size="small" style="color: #fff" @click="">
          删除
        </el-button>
      </template>
    </tablePro> -->
  </div>
</template>