element ui table

`el-table` 是 Element UI 中的表格组件，用于展示和编辑数据。这个表格组件提供了许多功能，包括分页、排序、筛选、自定义模板等。以下是一些基本用法和示例：

基本用法

```html

<template>

  <el-table :data="tableData">

    <el-table-column prop="date" label="日期" width="180"></el-table-column>

    <el-table-column prop="name" label="姓名" width="180"></el-table-column>

    <el-table-column prop="address" label="地址"></el-table-column>

  </el-table>

</template>

<script>

export default {

  data() {

    return {

      tableData: [

        { date: '2023-01-01', name: 'John Doe', address: 'New York' },

        { date: '2023-01-02', name: 'Jane Doe', address: 'London' },

        { date: '2023-01-03', name: 'Sam Smith', address: 'Tokyo' }

      ]

    };

  }

};

</script>

```

在上述示例中，我们创建了一个简单的表格，包含日期、姓名和地址列。数据通过 `:data` 绑定到 `tableData` 属性上。

排序和分页

```html

<template>

  <el-table :data="tableData" :default-sort="{ prop: 'date', order: 'descending' }" :span-method="spanMethod">

    <el-table-column prop="date" label="日期" sortable width="180"></el-table-column>

    <el-table-column prop="name" label="姓名" sortable width="180"></el-table-column>

    <el-table-column prop="address" label="地址" sortable></el-table-column>

    <el-table-column label="操作">

      <template slot-scope="scope">

        <el-button @click="handleEdit(scope.row)">编辑</el-button>

      </template>

    </el-table-column>

  </el-table>

</template>

<script>

export default {

  data() {

    return {

      tableData: [

        { date: '2023-01-01', name: 'John Doe', address: 'New York' },

        { date: '2023-01-02', name: 'Jane Doe', address: 'London' },

        { date: '2023-01-03', name: 'Sam Smith', address: 'Tokyo' }

      ]

    };

  },

  methods: {

    handleEdit(row) {

      // 编辑操作

      console.log('编辑', row);

    },

    spanMethod({ row, column, rowIndex, columnIndex }) {

      if (columnIndex === 3) {

        // 自定义合并单元格逻辑

        return [1, 2];

      }

    }

  }

};

</script>

```

在这个示例中，我们添加了排序和分页功能。通过 `sortable` 属性启用排序，通过 `:default-sort` 设置默认排序。我们还添加了一个自定义操作列，点击 "编辑" 按钮会触发 `handleEdit` 方法。

更多功能

`el-table` 还支持很多其他功能，如筛选、合并单元格、选择、自定义模板等。具体的用法和配置可以在[官方文档](https://element.eleme.io/#/zh-CN/component/table)中查找。