基于vxe table封装表格组件

下面是封装vxe-grid组件的简易实现，方便在项目中多处使用表格。

按需导入：

// plugins/vxe-table/index.js
import {
  // 全局实例对象
  VXETable,
  VxeTable,
  VxeColumn,
  VxeGrid,
  VxeButton,
  VxePager,
} from "vxe-table";

// 导入主题变量，也可以重写主题变量
import "vxe-table/styles/cssvar.scss";
import "vxe-table/styles/variable.scss";
import "vxe-table/styles/all.scss";

export const LazyVxeTable = (app) => {
  app.use(VxeTable);
  app.use(VxeColumn);
  app.use(VxeGrid);
  app.use(VxeButton);
  app.use(VxePager);
};


//main.js
import { LazyVxeTable } from './plugins/vxe-table/index.js';
const app = createApp(App);
app.use(LazyVxeTable).mount('#app')

封装的表格组件：

<template>
  <div class="grid-wrap">
    <vxe-grid v-bind="gridOptions">
      <template v-for="item in slotsDefault" #[item.slots.default]="{ row }">
        <slot :name="item.slots.default" :row="row"></slot>
      </template>

      <template v-for="item in slotsHeader" #[item.slots.header]>
        <slot :name="item.slots.header"></slot>
      </template>

      <template #pager>
        <!--使用 pager 插槽-->
        <vxe-pager
          :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
          v-model:current-page="tablePage.currentPage"
          v-model:page-size="tablePage.pageSize"
          :total="tablePage.total"
          @page-change="handlePageChange">
        </vxe-pager>
      </template>
    </vxe-grid>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed, onMounted } from "vue";
const props = defineProps({
    data: {
        type: Array,
        default: []
    },
    columns: {
        type: Array,
        default: []
    },
    fetchDataFn: {
        type: Function
    }
});
// 单元格
const slotsDefault = computed(()=>{
    return props.columns?.filter((item)=>item?.slots?.default)
})
// 表头单元格
const slotsHeader = computed(()=>{
    return props.columns?.filter((item) => item.slots?.header);
})

// 表格参数
const gridOptions = reactive({
  border: true,
  height: 300,
  align: null,
  columnConfig: {
    resizable: true,
  },
  columns: props.columns,
  data: props.data,
});

// 分页相关参数
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
})

const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage
  tablePage.pageSize = pageSize
}

onMounted(()=>{
  // 发送请求
  props?.fetchDataFn();
})
</script>

测试：

<script setup>
import { ref } from "vue";

const data = ref([
  {
    id: 10001,
    name: "Test1",
    nickname: "T1",
    role: "Develop",
    sex: "Man",
    age: 28,
    address: "Shenzhen",
  },
  {
    id: 10002,
    name: "Test2",
    nickname: "T2",
    role: "Test",
    sex: "Women",
    age: 22,
    address: "Guangzhou",
  },
  {
    id: 10003,
    name: "Test3",
    nickname: "T3",
    role: "PM",
    sex: "Man",
    age: 32,
    address: "Shanghai",
  },
  {
    id: 10004,
    name: "Test4",
    nickname: "T4",
    role: "Designer",
    sex: "Women",
    age: 23,
    address: "Shenzhen",
  },
  {
    id: 10005,
    name: "Test5",
    nickname: "T5",
    role: "Develop",
    sex: "Women",
    age: 30,
    address: "Shanghai",
  },
  {
    id: 10006,
    name: "Test6",
    nickname: "T6",
    role: "Designer",
    sex: "Women",
    age: 21,
    address: "Shenzhen",
  },
  {
    id: 10007,
    name: "Test7",
    nickname: "T7",
    role: "Test",
    sex: "Man",
    age: 29,
    address: "Shenzhen",
  },
  {
    id: 10008,
    name: "Test8",
    nickname: "T8",
    role: "Develop",
    sex: "Man",
    age: 35,
    address: "Shenzhen",
  },
]);

const columns = ref([
  { type: "seq", width: 50 },
  { field: "name", title: "name", slots:{ default: 'name_default', header: 'name_header' } },
  { field: "sex", title: "sex", slots: { default: 'sex_default' } },
  { field: "address", title: "Address", slots: { default: 'address_default' } },
]);

const fetchDataFn = ()=>{
  console.log('request fetchDataFn');
}
</script>

<template>
  <CommonVxeTable :data="data" :columns="columns" :fetchDataFn="fetchDataFn">
    <!-- 自定义单元格模板 -->
    <template #name_default="{row}">
      <div>name: {{ row.name }}</div>
    </template>
    <template #sex_default="{row}">
      <div>sex:{{ row.sex }}</div>
    </template>
    <template #address_default="{row}">
      <div>address:{{ row.address }}</div>
    </template>

    <!-- 表头单元格模板 -->
    <template #name_header>
      <span>hi my name header</span>
    </template>
  </CommonVxeTable>
</template>