利用el-table

`el-table` 是 Element UI 提供的一个强大的表格组件，用于展示数据列表，它具有丰富的功能，如列宽自适应、排序、分页、搜索等。以下是利用 `el-table` 实现基础表头和数据展示的基本步骤：

1. 引入依赖：首先需要在项目中引入 Element UI 的 CSS 和 JS 文件，例如在 `main.js` 中：

   import { ElTable, ElRow, ElCol } from 'element-ui';

2. 创建表格组件结构：在 HTML 中定义一个容器来放置表格，添加表头和数据部分：

   <div id="app">
     <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>
   </div>

3. 定义数据和列配置：在 JavaScript 中，创建一个包含数据的对象数组 (`tableData`)，同时定义表头的列配置，比如列名和宽度：

   export default {
     data() {
       return {
         tableData: [
           { date: '2016-05-02', name: '王小虎', age: 32 },
           { date: '2016-05-04', name: '王小红', age: 30 },
           // 更多数据...
         ],
         columns: [
           { prop: 'date', label: '日期' },
           { prop: 'name', label: '姓名' },
           { prop: 'age', label: '年龄' },
           // 添加其他列的配置...
         ]
       };
     },
     // 其他生命周期方法和方法...
   }

4. 动态添加或删除数据：你可以根据需求动态修改 `tableData` 数组来刷新表格内容，比如使用 Vue 的 `$set` 方法来添加新的行：

   addData() {
     this.$set(this.tableData, this.tableData.length, { ... });
   }