element-plus-table-pro v2.4.12

仿照 antd pro 的搜索表格 对 element-plus-table 进行二次封装。支持多表头，完全兼容官方文档的所有属性，事件，插槽，方法。与官方版本同步更新

【elementPlus 表格扩展插件】 https://www.bilibili.com/video/BV1QN4y1s7gf/?share_source=copy_web&vd_source=d89bee5685527bb00d6328b67f985401

• 刷新表格
• 切换表格密度
• 设置列 显示隐藏 排序 左右固定 重置
• 全屏

快速上手

yarn add element-plus-table-pro

import { BaseTable } from "element-plus-table-pro";
import "element-plus-table-pro/dist/style.css";

你可以完全把 BaseTable 组件当成 el-table 组件来用

前提项目里必须安装 element-plus 才可以正常使用

参考:https://element-plus.gitee.io/zh-CN/guide/quickstart.html

完整代码

<template>
  <BaseTable :data="tableData" align="center" @refreshTable="refreshTable">
    <template #headerLeft>
      <el-button type="primary">新增用户</el-button>
      <el-button>批量删除用户</el-button>
    </template>
    <el-table-column type="selection" width="55" />

    <el-table-column prop="date" label="Date" width="150" fixed="left">
    </el-table-column>
    <el-table-column prop="date2" label="date2" width="150" fixed="left">
    </el-table-column>
    <el-table-column prop="date3" label="date3" width="150" fixed="left">
    </el-table-column>
    <el-table-column prop="date4" label="date4" width="150" fixed="left">
    </el-table-column>
    <el-table-column prop="date5" label="date5" width="150" fixed="left">
    </el-table-column>
    <el-table-column type="index" width="55" label="" fixed="right" />
    <el-table-column label="Delivery Info" fixed="left">
      <el-table-column prop="name" label="Name" width="120" />
      <el-table-column label="Address Info">
        <el-table-column prop="state" label="State" width="120">
          <template #header="scope"
            ><span style="color: red"> {{ scope.column.property }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="city" label="City" width="120" />
        <el-table-column prop="address" label="Address" />
        <el-table-column prop="zip" label="Zip" width="120" />
      </el-table-column>
    </el-table-column>
    <el-table-column fixed="right" label="Operations" width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click="test(scope)"
          v-if="scope"
          >查看{{ scope.$index }}</el-button
        >
        <el-button link type="primary" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </BaseTable>
</template>
<script setup lang="ts">
import BaseTable from "@/components/baseTable/index.vue";

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-08",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-06",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
  {
    date: "2016-05-07",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    date2: "date2",
    date3: "date3",
    date4: "date4",
    date5: "date5",
  },
];

const refreshTable = () => {
  console.log("刷新表格");
};

const test = (scope: any) => {
  console.log(scope);
};
</script>

<style scoped lang="scss"></style>