Vue3+elemengtUi写一个自定义表格

在Vue3中使用Element UI构建一个自定义表格，你可以遵循以下步骤：

1. 安装依赖：
首先安装Vue3和Element UI：

npm install vue@next element-ui

2. 引入组件库：
在你的项目中导入Element UI需要的组件：

import { Table } from 'element-plus';

3. 创建Vue组件：
创建一个新的Vue组件，例如`CustomTable.vue`：

<template>
  <div>
    <el-table :data="tableData" :columns="columns" ref="customTable">
      <!-- 每列定义 -->
      <template v-for="(column, index) in columns" :key="index">
        <el-table-column :prop="column.prop" :label="column.label" />
      </template>
    </el-table>
    <!-- 可能的按钮、搜索框等交互元素 -->
    <button @click="handleAction">操作</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 示例数据
const tableData = [
  {
    id: 1,
    name: '张三',
    age: 25,
    address: '北京'
  },
  // ...更多行数据
];

// 列配置数组
const columns = [
  { prop: 'id', label: 'ID' },
  { prop: 'name', label: '姓名' },
  { prop: 'age', label: '年龄' },
  { prop: 'address', label: '地址' },
];

// 表格操作函数
function handleAction() {
  // 这里可以根据实际需求处理数据或触发事件
}

onMounted(() => {
  // 初始化数据
});
</script>

<style scoped>
/* 样式可以在这里添加 */
</style>

4. 使用组件：
在需要的地方引入并使用这个自定义表格组件。