自定义组件解决el-tree-select 在数据量过大时候页面卡顿
代码由DeepSeek生成,初步测试,没有什么问题。
1 2select 3 ref="selectRef" 4 v-model="selectValue" 5 :placeholder="placeholder" 6 :disabled="disabled" 7 :clearable="clearable" 8 :multiple="multiple" 9 :filterable="filterable" 10 :filter-method="handleFilterMethod" 11 :value-key="valueKey" 12 popper-class="virtual-tree-select-popper" 13 collapse-tags 14 collapse-tags-tooltip 15 @visible-change="onVisibleChange" 16 @remove-tag="onRemoveTag" 17 @clear="onClear" 18 > 19 20 21 48 49 369 370option 22 v-for="item in cacheOptions" 23 :key="item[valueKey]" 24 :label="item[labelKey]" 25 :value="item[valueKey]" 26 /> 27 28 293046 47v2 31 ref="treeRef" 32 :data="treeData" 33 :props="treeProps" 34 :height="treeHeight" 35 :highlight-current="!multiple" 36 :show-checkbox="multiple" 37 :check-strictly="checkStrictly" 38 :expand-on-click-node="true" 39 :filter-method="filterMethod" 40 :default-expanded-keys="defaultExpandedKeys" 41 @node-click="onNodeClick" 42 @check="onCheck" 43 @current-change="onCurrentChange" 44 /> 45
使用示例:
select v-model="selectedId" :data="treeData" placeholder="请选择知识节点" /> 单选结果:{{ selectedId }}
select v-model="selectedIds" :data="treeData" multiple placeholder="请选择多个知识节点" collapse-tags collapse-tags-tooltip /> 多选结果:{{ selectedIds }}
原文地址: https://www.cveoy.top/t/topic/qGwU 著作权归作者所有。请勿转载和采集!