element-plus el-tree-v2大数据量勾选节点卡顿问题

卡顿原因解析 juejin.cn/post/731161...
html 复制代码
<template>
  <div>
    <button @click="setCheck">勾选</button>
    <el-tree-v2
        ref="treeRef"
        :data="data"
        :height="600"
        :props="defaultProps"
        show-checkbox
        :check-strictly="checkStrictly"
        :default-expanded-keys="[]"
        node-key="id"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'

const checkStrictly = ref(false)
const treeRef = ref()
const data = ref([
  {
    id: 1,
    label: '一级 1',
    children: [
      {
        id: 4,
        label: '二级 1-1',
        children: [
          { id: 9, label: '三级 1-1-1' },
          { id: 10, label: '三级 1-1-2' }
        ]
      },
      { id: 99, label: 'asasa' },
      { id: 88, label: 'vcvcvc' }
    ]
  },
  {
    id: 2,
    label: '一级 2',
    children: [
      { id: 5, label: '二级 2-1' },
      { id: 6, label: '二级 2-2' }
    ]
  },
  {
    id: 3,
    label: '一级 3',
    children: [
      { id: 7, label: '二级 3-1' },
      { id: 8, label: '二级 3-2' }
    ]
  }
])

const defaultProps = reactive({
  children: 'children',
  label: 'label'
})

const ids = ref([10, 8])

// 初始化大数据量
for (let i = 0; i < 20000; i++) {
  ids.value.push(i + 100)
  data.value[0].children.push({
    id: i + 100,
    label: i.toString()
  })
}

/**
 * 勾选逻辑
 */
const setCheck = () => {
  console.time('勾选耗时')
  let node = null
  let obj = {};
  let key = null
  checkStrictly.value = true; // 父子节点不关联

  ids.value.map(item => {
    node = treeRef.value.getNode(item)

    key = node.parent.key || node.key

    treeRef.value.setChecked(item, true, true)

    // 用于，触发勾选函数，实现级联勾选
    if (!obj[key]) {
      obj[key] = node.data;
    }
  })

  checkStrictly.value = false;  // 父子节点关联

  // 触发勾选函数，实现级联勾选
  nextTick(() => {
    for (let key in obj) {
      treeRef.value.setChecked(obj[key], true);
    }
  });

  console.timeEnd('勾选耗时')
}
</script>