el-table 封装組件

`el-table` 是 Element UI 中的一个强大的表格组件，它提供了一种简单的方式来展示数据并对其进行操作。它是基于 Vue.js 开发的，非常适合用于管理结构化数据，比如用户列表、订单详情等。`el-table` 具有丰富的功能，包括列分隔、排序、搜索过滤、单元格合并、行选择、虚拟滚动等，可以方便地定制表头样式、列宽、行高等。

在使用 `el-table` 组成封装组件时，你可以做如下的步骤：

1. 引入组件：首先，在你的 Vue 项目中安装 Element UI，并在需要的地方导入 `el-table` 组件。

<template>
  <el-table :data="tableData" @selection-change="handleSelectionChange"></el-table>
</template>

<script>
import { ElTable } from "element-plus";

export default {
  components: {
    ElTable,
  },
  data() {
    return {
      tableData: [], // 数据源数组
    };
  },
  methods: {
    handleSelectionChange(selectedRowKeys) {
      console.log("选中了", selectedRowKeys);
    }
  },
};
</script>

2. 定义数据和事件处理：你需要定义一个数据数组作为表格的数据源，并为表单添加事件监听器，如点击行时触发的操作。

3. 配置选项：根据需求配置列定义、行属性、表头样式等元素，可以通过 `columns` 属性设置列配置。