el-table二次封装与使用

el-table 是 Element UI 中的一个表格组件，可以用于展示和编辑数据。二次封装 el-table 是为了更方便地使用和定制表格组件。

以下是一个 el-table 的二次封装的示例：

<template>
  <div>
    <el-table
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        label="姓名"
      ></el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
      ></el-table-column>
      <el-table-column
        prop="gender"
        label="性别"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, gender: '男' },
        { name: '李四', age: 25, gender: '女' },
        { name: '王五', age: 30, gender: '男' },
      ],
    };
  },
};
</script>

在上面的示例中，我们使用了 el-table 组件，并传入了一个数组作为表格的数据源。我们通过 el-table-column 组件定义了三列，分别是姓名、年龄和性别。

这样，我们就完成了一个简单的 el-table 的二次封装和使用。你可以根据自己的需求进一步定制表格组件，例如添加排序、筛选、分页等功能。希望能对你有所帮助！如果还有其他问题，请继续提问。