el-table那些事

el-table 是 Element UI 库中用于 Vue.js 的表格组件。以下是关于 el-table 组件的一些常用事件和操作：

1. 数据更新：当表格数据发生变化时，可以使用 el-table 的 data 属性来更新表格的数据。
2. 行点击事件：可以使用 @row-click 事件来监听行的点击事件。
3. 选择改变：可以使用 @selection-change 事件来监听选中项的变化。
4. 排序改变：可以使用 @sort-change 事件来监听列的排序变化。
5. 展开行改变：可以使用 @expand-change 事件来监听展开行的变化。

以下是一个简单的例子，展示如何使用 el-table 的基本事件：

<template>
  <el-table
    :data="tableData"
    @row-click="handleRowClick"
    @selection-change="handleSelectionChange"
    @sort-change="handleSortChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      sortable="custom">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable="custom">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      sortable="custom">
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, /* ... more data ... */]
    }
  },
  methods: {
    handleRowClick(row, column, event) {
      // 行点击事件的处理逻辑
      console.log('Row clicked:', row);
    },
    handleSelectionChange(selection) {
      // 选中项变化的处理逻辑
      console.log('Selection changed:', selection);
    },
    handleSortChange({ column, prop, order }) {
      // 排序变化的处理逻辑
      console.log(`Sorted by: ${prop}, order: ${order}`);
    }
  }
}
</script>

在这个例子中，我们定义了一个表格组件，并为它添加了几个基本的事件处理函数。当行被点击时，handleRowClick 函数会被调用，并输出被点击行的信息。当选中的行发生变化时，handleSelectionChange 函数会输出新的选中项。当列进行排序时，handleSortChange 函数会输出排序的字段和顺序。