element tabel手动实现自定义筛选排序问题

最新推荐文章于 2024-07-30 08:28:18 发布

虚拟中的神

最新推荐文章于 2024-07-30 08:28:18 发布

阅读量1.5k

点赞数 1

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/m0_60067716/article/details/122719845

版权

在使用Element UI的表格组件时，遇到手动实现自定义筛选后，点击筛选下拉框会触发排序的问题。通过分析，发现可能是冒泡事件导致。尝试在自定义筛选框组件上添加@click.stop防止冒泡，但并未完全解决问题。最终解决方案是利用官方的筛选功能，设置`:filters="[]"`来启用，并隐藏官方筛选，从而避免了排序被触发，成功解决了误操作的问题。

摘要由CSDN通过智能技术生成

问题描述：手动实现自定义筛选后，点击下拉框会触发排序。

解决：

1.初步猜测是冒泡引起的，那么自定义筛选框组件加@click.stop 禁止冒泡

  <div class="customHeader" @click.stop>
    <el-popover
      placement="bottom"
      title="查询条件"
      width="300"
      trigger="click"
      ref="popover">
    </el-popover>
  </div>

问题解决，点击红色区域没问题，点击绿色区域还是会被排序，而且很容易被误点到。官方提供的筛选可不是这样的奥

2.上面我们得知使用官方的筛选没问题，那么我们使用官方筛选

    <el-table :data="tableData" style="width: 100%" border stripe>
      <template v-for="(item, index) in tableConfig">
        <el-table-column
          sortable