vue3 element-plus+ts表格列表配置

在Vue3中，结合Element Plus库和TypeScript创建表格列表通常涉及以下几个步骤：

1. 安装依赖：
首先，你需要安装`vue`, `element-plus`, 和 `vue-class-component`（用于支持 TypeScript 的 Vue 组件）。如果还没安装，可以在终端或命令提示符中运行：

   npm install vue@next element-plus vue-class-component @vue/types/vue

2. 引入并配置Element Plus：
在你的`main.ts`或其他入口文件中，引入Element Plus并配置全局样式：

   import { createApp } from 'vue';
   import ElementPlus from 'element-plus';
   import App from './App.vue';

   // 全局注册Element Plus组件
   createApp(App).use(ElementPlus);

3. 创建TS组件：
使用TypeScript创建一个表格组件，例如`Table.vue`:

   import { Component, Prop } from 'vue-class-component';
   import { ElTable } from 'element-plus';

   @Component({
     components: {
       ElTable,
     },
   })
   export default class Table extends Vue {
     @Prop() dataSource: any[]; // 数据源数组
     @Prop() columns: Array<ElTableColumn>; // 表头配置

     mounted() {
       this.$el.addEventListener('selection-change', (event) => {
         console.log('选中的行数据:', event.selections);
       });
     }
   }

4. 在模板中使用表格：
在组件内，你可以像下面这样渲染表格：

   <template>
     <el-table :data="dataSource" :columns="columns">
       <!-- ...省略列的渲染 -->
     </el-table>
   </template>

5. 调用组件：
在其他需要表格的地方，你可以通过props传递数据和配置：

   <Table :dataSource="yourData" :columns="tableColumns"/>