前端 - 在 el-table 中如何获取用户勾选的筛选数据?

Question

el-table有一个筛选功能，筛选和重置都没有问题；但是表格上面还有单独写的查询功能，现在的业务要求是点击上面的查询按钮，可以获取到筛选那儿都勾选了哪些，去做查询，目前不清楚如何获取到勾选的数据。
因为只有点击了筛选或重置才会触发事件，了解到勾选了哪些，现在触发查询在另外一个地方，不知道应该怎么办了

希望获取到勾选的数据。

Answer 1

要获取到用户在 el-table 中勾选的筛选数据，你可以使用 Element UI 的 el-table 组件提供的 selection 属性以及 selection-change 事件来实现。

selection 属性是用于控制行选中的状态，它接受一个数组作为参数，表示被选中的行。当用户勾选或取消勾选行时，会触发 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="180"    >    </el-table-column>    <el-table-column      prop="name"      label="姓名"      width="180"    >    </el-table-column>    <!-- 其他列 -->  </el-table></template><script>export default {  data() {    return {      tableData: [        { date: '2023-03-01', name: '张三' },        { date: '2023-03-02', name: '李四' },        { date: '2023-03-03', name: '王五' },        // 其他数据项      ],      selectedRows: [], // 用于存储被选中的行数据    };  },  methods: {    handleSelectionChange(val) {      this.selectedRows = val; // 将选中的行数据存储到 selectedRows 数组中    },  },};</script>

在上面的示例中，handleSelectionChange 方法会接收到一个参数 val，它是一个数组，包含了所有被选中的行数据。你可以在 handleSelectionChange 方法中将这个数组存储到一个变量中，比如这里的 selectedRows 数组。然后，你可以在需要获取勾选数据的地方使用这个变量来获取到用户勾选的筛选数据。