vue3 el-table

Vue3中的`<el-table>`组件是Element UI库的一部分，它是一个用于显示数据列表的高级表格组件。在Vue3项目中，你可以使用`el-table`轻松创建交互式的表格，支持列分隔、排序、搜索、懒加载等功能。它的基本结构包括以下几个部分：

1. `<el-table>`标签作为容器，包裹整个表格。
2. `<el-table-column>`标签定义每一列，包含列标题和数据字段。
3. `data`属性绑定一个数组，每个元素代表一行数据。
4. 可选的事件处理器如`@row-click`、`@selection-change`等处理用户交互。

例如：

<template>
  <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 label="操作">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.$index)">点击</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        //...
      ],
    };
  },
  methods: {
    handleClick(index) {
      console.log(`点击了第${index}行`);
    }
  }
};
</script>