el-tree加载数据量大页面卡顿优化

<div v-if="inputType == '2'" >
            <el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="filterText"></el-input>
            <el-checkbox v-if="!filterText" v-model="checked" @change="checkedAllTree" class="checkBoxAll" >全选</el-checkbox>
            <div v-el-tree-loadmore="loadMore(20)" class="optionsBox">
                <el-tree
                    class="filter-tree"
                    :data="copySelectData.slice(0,rangeNumber)"
                    :props="defaultPropTrees"
                    default-expand-all
                    node-key="id"
                    show-checkbox
                    :default-checked-keys="defaultTreeCheckList"
                    @check="currentChecked"
                    ref="tree">
                </el-tree>
            </div>
        </div>

data() {
	return {
			selectData: []，//全量数据
			copySelectData: [],
            rangeNumber: 20
	}
},
methods： {
	loadMore(n) {
            return () => this.rangeNumber += n
        },
	//输入字符模糊查询
        filterNode(value, data) {
            if(value) {
                let filterArr = this.selectData.filter((item)=>{
                    return item.name.toLowerCase().includes(value.toLowerCase())
                })
                this.copySelectData = filterArr
            }else {
                this.copySelectData = this.selectData
            }
        },
},
directives: {
        'el-tree-loadmore': {
            bind(el, binding)  {
                if(el){
                    el.addEventListener("scroll", function () {
                        const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
                        if (scrollDistance <= 0) {
                            binding.value()
                        }
                    })
                }
            }
        }
    },

.optionsBox{
    max-height: 500px;
    overflow: auto;
}