Vue3-Element表格组件（el-table）的简单封装

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>
 
<script>
import { ref } from 'vue';
import { ElTable, ElTableColumn } from 'element-plus';
 
export default {
  components: {
    ElTable,
    ElTableColumn
  },
  setup() {
    const tableData = ref([
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      // ...更多数据
    ]);
 
    return {
      tableData
    };
  }
};
</script>

这个简单的例子展示了如何在Vue 3项目中使用Element Plus库中的el-table和el-table-column组件来创建一个基本的表格。tableData是一个响应式数据，可以被用来动态更新表格内容。这个例子是对原有代码的简化，去除了不必要的属性和样式，以便更清晰地展示核心功能。