vue3 + vxe-table 封装通用Grid业务组件

在Vue 3中，你可以使用Composition API来创建一个通用的表格组件，结合VXE-Table来实现。以下是一个简单的示例：

<template>
  <vxe-table
    border
    resizable
    height="100%"
    :data="tableData"
    :loading="tableLoading"
  >
    <vxe-table-column
      v-for="field in tableFields"
      :key="field.prop"
      :field="field.prop"
      :title="field.label"
    ></vxe-table-column>
  </vxe-table>
</template>
 
<script>
import { ref } from 'vue';
export default {
  name: 'GenericGrid',
  props: {
    tableFields: {
      type: Array,
      default: () => [],
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    tableLoading: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    // 你可以在这里添加更多的逻辑，比如事件处理、计算属性等
    return {
      ...props,
    };
  },
};
</script>

在这个组件中，tableFields 和 tableData 是从父组件传递进来的，用于定义表格列和数据。tableLoading 属性用于指示表格是否处于加载状态。

使用此组件时，你需要传递正确的数据结构和相应的配置：

<template>
  <GenericGrid
    :tableFields="[
      { label: '姓名', prop: 'name' },
      { label: '年龄', prop: 'age' },
      // ...更多字段
    ]"
    :tableData="[
      { name: '张三', age: 30 },
      { name: '李四', age: 24 },
      // ...更多数据
    ]"
    :tableLoading="false"
  />
</template>

这样，你就创建了一个可以重复使用的通用表格组件，可以用于展示各种数据。