Table Events事件里的select-all怎么使用，举个例子

在Element UI中，`el-table`组件的全选功能可以通过监听`select-all`事件来实现。这个事件会在用户点击表头的全选框时触发，并传递一个布尔值参数来表示是否被全选。下面是一个具体的例子：

假设我们有一个包含一些用户信息的表格，我们希望当用户点击全选框时，可以选中或取消选中所有行。

HTML部分：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @select-all="selectAll"
    v-model="multipleSelection"
  >
    <el-table-column type="selection" width="55"></el-table-column>
    <el-column>
    <el-table-column prop="age" label="Age" width="80"></el-table-column>
    <el-table-column prop="address" label="Address"></el-table-column>
  </el-table>
</template>

JavaScript部分：

<script>
export default {
  data() {
    return {
      multipleSelection: [], // 用于存储被选中的行
      tableData: [
        { name: 'John', age: 30, address: 'New York' },
        { name: 'Jane', age: 25, address: 'San Francisco' },
        { name: 'Tom', age: 40, address: 'Los Angeles' }
      ]
    };
  },
  methods: {
    selectAll(val) {
      console.log('Selected all rows:', val);
      // 根据val的值决定是选中所有行还是取消选中所有行
      if (val) {
        this.multipleSelection = [...this.tableData];
      } else {
        this.multipleSelection = [];
      }
    }
  }
};
</script>

在这个例子中，我们首先在`el-table`标签上绑定了`@select-all="selectAll"`事件。然后在`selectAll`方法中，根据传入的`val`参数来判断用户是选择了全选还是取消了全选。如果`val`为`true`，则将所有行添加到`multipleSelection`数组中；如果为`false`，则清空`multipleSelection`数组。