el-table的selection-change事件如何实现的

el-table的selection-change事件是在表格中选择了一行或多行后触发的。它的实现方式如下：

1. 在el-table标签上绑定selection-change事件，例如：

<el-table @selection-change="handleSelectionChange">

2. 在Vue实例中定义handleSelectionChange方法，例如：

methods: {
  handleSelectionChange(rows) {
    console.log(rows); // 打印选择的行数据
  }
}

3. 当用户在表格中选择一行或多行时，handleSelectionChange方法将被触发，它的参数是一个数组，包含选择的行数据。

这样，我们就可以通过selection-change事件来实现对表格中选择行的处理。

相关问题

el-tableselection-change事件

### 使用 `el-table` 的 `selection-change` 事件

当使用 Element UI 的 `el-table` 组件时，可以通过监听 `selection-change` 事件来响应多选框的选择变化。此事件会在选择项发生变化时触发，并传递当前已选项作为参数。

#### HTML 结构
定义表格并启用多选列：

<template>
  <div>
    <el-table ref="multipleTable" :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

#### JavaScript 方法
编写处理函数用于捕获选择的变化情况：

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-02', name: 'John', address: 'No. 189, Grove St, Los Angeles' }
      ],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.multipleSelection = selection;
      console.log('Current selected items:', selection);
    }
  }
};
</script>

通过上述代码，在每次用户改变所选行之后都会调用 `handleSelectionChange` 函数并将新的选定记录列表传入该函数中[^1]。

el-table @selection-change事件动态控制

在Vue.js中使用Element UI的el-table组件时，@selection-change事件用于监听表格中选中的行发生变化的事件。通过这个事件，我们可以动态控制选中的行，并执行相应的逻辑。以下是一个示例代码，展示了如何使用@selection-change事件来动态控制选中的行：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="120">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  <el-button @click="clearSelection">取消选择</el-button>
</template>

<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      multipleSelection: []
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    clearSelection() {
      this.$refs.multipleTable.clearSelection();
    }
  }
};
</script>

在这个示例中，我们定义了一个el-table组件，并在其中添加了el-table-column来展示数据。通过`@selection-change="handleSelectionChange"`绑定事件处理函数，当选中行发生变化时，会触发`handleSelectionChange`方法。在该方法中，我们将选中的行赋值给`multipleSelection`，并打印出来。

同时，我们还定义了一个按钮，点击按钮时会调用`clearSelection`方法，通过`this.$refs.multipleTable.clearSelection()`来取消所有选中的行。