vue3 ts element-plus vite--表格封装

在Vue 3和TypeScript中，你可以使用Composition API来封装一个可复用的表格组件。以下是一个简单的示例，展示了如何封装一个表格组件：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column
      v-for="column in columns"
      :key="column.prop"
      :prop="column.prop"
      :label="column.label"
    ></el-table-column>
  </el-table>
</template>
 
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
 
interface TableColumn {
  label: string;
  prop: string;
}
 
export default defineComponent({
  components: {
    ElTable,
    ElTableColumn
  },
  props: {
    columns: {
      type: Array as PropType<TableColumn[]>,
      required: true
    },
    tableData: {
      type: Array,
      required: true
    }
  }
});
</script>

在这个例子中，我们定义了一个TableColumn接口来描述每一列的label和prop。然后我们创建了一个Vue组件，它接受columns和tableData作为props，其中columns是一个TableColumn数组，tableData是表格的数据数组。

使用这个组件时，你需要传入正确格式的columns和tableData：

<template>
  <CustomTable :columns="tableColumns" :table-data="data" />
</template>
 
<script lang="ts">
import { defineComponent, reactive } from 'vue';
import CustomTable from './components/CustomTable.vue';
 
export default defineComponent({
  components: {
    CustomTable
  },
  setup() {
    const tableColumns = reactive([
      { label: '姓名', prop: 'name' },
      { label: '年龄', prop: 'age' },
      { label: '地址', prop: 'address' }
    ]);
 
    const data = reactive([
      { name: '小明', age: 30, address: '上海市' },
      { name: '小红', age: 24, address: '北京市' }
    ]);
 
    return { tableColumns, data };
  }
});
</script>

在这个例子中，我们创建了一个tableColumns数组来定义表格的列，以及一个data数组来存储表格的数据。然后我们将它们传递给CustomTable组件。