el-table 是 Element UI 中的一个表格组件,用于展示一些数据。以下是 el-table 的使用步骤:

  1. 引入 Element UI 库及样式文件
    ```html
    <!-- 引入 Element UI 样式文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入 Element UI 库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    ```
    
  2. 定义 el-table 组件
    ```html
    <el-table :data="tableData">
      <!-- 列的定义 -->
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
    </el-table>
    ```
    
  3. 定义数据
    ```javascript
    data() {
      return {
        tableData: [
          { name: '张三', age: 20, address: '北京市' },
          { name: '李四', age: 30, address: '上海市' },
          { name: '王五', age: 25, address: '广州市' },
        ],
      };
    },
    ```
    

以上就是 el-table 的基本使用步骤。可以通过官方文档了解更多的配置项和使用方式。

Element UI 表格组件 el-table 使用教程

原文地址: https://www.cveoy.top/t/topic/m2eE 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录