el-table 如何使用

el-table 是 Element UI 中的一个表格组件，可以用于展示数据。以下是使用 el-table 的一些基本步骤：

1. 安装 Element UI 并引入 CSS 和 JS 文件。

2. 在 vue 组件中引入 el-table 组件。

import { ElTable, ElTableColumn } from 'element-ui';

export default {
  components: {
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, address: '北京市' },
        { name: '李四', age: 22, address: '上海市' },
        { name: '王五', age: 25, address: '广州市' },
        { name: '赵六', age: 30, address: '深圳市' },
      ]
    }
  }
}

3. 在 template 中使用 el-table 组件。

<template>
  <div class="demo">
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

以上代码实现了一个简单的 el-table 表格，其中 table-data 属性是表格的数据，el-table-column 组件是表格的列，prop 属性指定了该列对应的数据字段，label 属性指定了该列的表头名称。

除了以上基本用法外，el-table 还提供了一些其他的功能，如分页、排序、筛选、合并等，可以根据需要进行配置和使用。