el-table搜索多选

el-table搜索多选是指在表格中进行搜索时，可以同时选择多个搜索结果。实现方法如下：
1. 首先，在el-table组件中添加一个selection-change事件监听器，用于捕捉选择变化的事件。
2. 在事件处理函数中，获取当前选择的行数据，并根据选择的行数据对表格数据进行筛选，将选中的数据和未选中的数据分别组成两个数组。
3. 最后，通过调用toggleRowSelection方法，将选中的行设置为选中状态。

相关问题

element ui el-table中多选

在 Element UI 的 el-table 中实现多选功能，你可以使用 table 组件的 selection 属性来实现。下面是一个示例代码：

<template>
  <el-table
    :data="tableData"
    :selection="selection"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 20, address: '1234 Street' },
        { name: 'Jane', age: 25, address: '5678 Street' },
        { name: 'Tom', age: 30, address: '9876 Street' },
        { name: 'Alice', age: 35, address: '5432 Street' }
      ],
      selection: []
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selection = selection;
    }
  }
};
</script>

在上述代码中，我们通过添加一个类型为 "selection" 的 el-table-column 来显示多选框列。然后，我们使用 selection 属性绑定一个空数组，并通过 @selection-change 监听选择变化事件，在方法中更新 selection 数组的值。

这样，你就可以在 el-table 中实现多选功能了。当用户选择或取消选择行时，selection 数组会随之更新。你可以根据需要进一步处理选择的数据。

el-table分页多选

可以通过在 el-table 中使用 selection-change 事件来监听多选框的变化，然后将选中的数据存储在一个数组中。同时，可以通过设置 el-pagination 的 page-size 属性来控制每页显示的数据量，从而实现分页效果。

示例代码如下：

<template>
  <div>
    <el-table :data="tableData" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <el-pagination
      :page-size="pageSize"
      :total="tableData.length"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, address: '北京市' },
        { name: '李四', age: 20, address: '上海市' },
        { name: '王五', age: 22, address: '广州市' },
        { name: '赵六', age: 24, address: '深圳市' },
        { name: '钱七', age: 26, address: '成都市' },
        { name: '孙八', age: 28, address: '重庆市' },
        { name: '周九', age: 30, address: '天津市' },
        { name: '吴十', age: 32, address: '南京市' },
      ],
      pageSize: 3,
      currentPage: 1,
      selectedData: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.selectedData = val;    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
};
</script>