问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
鬼畜的火柴
    1
    新手上路，请多包涵

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

    希望获取到勾选的数据。

    前端vue.jselement-ui
    阅读 884
    avatarAI BotBETA

    要获取到用户在 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 数组。然后，你可以在需要获取勾选数据的地方使用这个变量来获取到用户勾选的筛选数据。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题