Element-React Table 表格组件

Element-React 的 Table 组件是一个强大的表格组件，用于展示和操作数据。下面是一个简单的例子，演示如何在 Vue 组件中使用 Element-React 的 Table 组件：

首先，确保你已经安装了 Element-React，并在你的项目中引入了相应的样式和组件。可以通过 npm 或 yarn 安装：

npm install element-react
# 或
yarn add element-react

然后，在你的 Vue 组件中，可以这样使用 Table 组件：

<template>
  <div>
    <h3>Element-React Table 表格</h3>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
      <el-table-column prop="address" label="Address"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-react';

export default {
  components: {
    ElTable,
    ElTableColumn,
  },
  data() {
    return {
      tableData: [
        { name: 'John', age: 28, address: '123 Main St' },
        { name: 'Jane', age: 35, address: '456 Oak Ave' },
        { name: 'Doe', age: 45, address: '789 Cedar Ln' },
      ],
    };
  },
};
</script>

在这个例子中，我们引入了 Element-React 的 ElTable 和 ElTableColumn 组件，并在模板中使用它们。通过调整 tableData 数据属性，你可以自定义表格中的数据。

你可以根据 Element-React 的文档和组件属性来进一步自定义表格的外观和行为，比如设置列的宽度、排序、分页等功能。根据实际需求，你还可以使用插槽 (slot) 来自定义表格的内容和样式。

请根据你的具体需求参考 Element-React 的官方文档：[Element-React Table](https://element-plus.org/#/en-US/component/table)。

转载请注明出处：http://www.pingtaimeng.com/article/detail/5615/Element-React