el-table解决过滤导致选中的丢失

不懂代码的孩子

于 2024-09-05 11:27:10 发布

阅读量161

点赞数 4

分类专栏： Vue 文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/weixin_41957626/article/details/141926258

版权

el-table解决过滤导致选中的丢失

场景：

当前选中了A,B,C,D四条数据，我现在想找出Z这条数据，过滤之后，ABCD就是不可见，但是我还是选中了，此时选中Z之后ABCD就选中不了了，此时我们需要选中ABCD并且选中Z。

第一步：el-table的设置

重点是ref="kpiTableRef"，@select="handleSelectKpi"，@select-all="handleSelectKpi"

注意：select和select-all需要对应一个相同的方法的名称。

filteredKpiOptions是计算属性的来的。

      <el-table
        ref="kpiTableRef"
        style="margin: 0 10px 0 0"
        :data="filteredKpiOptions"
        :height="450"
        v-loading="kpiTableLoading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-row
        @select="handleSelectKpi"
        @select-all="handleSelectKpi"