解决 element-ui (el-cascader)卡顿

原创已于 2023-07-21 16:29:45 修改 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#ui #vue.js #javascript

于 2023-07-21 15:53:44 首次发布

当el-cascader组件在处理大量数据时出现卡顿，可以通过监听visible-change事件并在选中下拉选项后清空input搜索值，以及在nextTick中移除aria-owns属性来优化性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 el-cascader组件数据量过多时，会出现严重卡顿现象，以下方法可以解决：

<el-cascader placeholder="试试搜索：指南" : options="options" filterable @visible-change="visibleChange">
</el-cascader>

visibleChange(val) {
      if (val) {
		  //此处可以出来选中下拉选项，清空input搜索值
      }
      this.$nextTick(() => {
        // 添加这段代码
        const $el = document.querySelectorAll('.el-cascader-panel .el-cascader-node[aria-owns]');
        Array.from($el).map((item) => item.removeAttribute('aria-owns'));
      });
    }