element el-tree回显问题，处理要么全选要么选不上

本文连接：https://www.cnblogs.com/muphy/p/15798800.html

<el-tree
    ref="tree"
    :data="menuList"
    node-key="id"
    default-expand-all
    :props="{ label: 'name' }"
    :check-strictly="checkStrictly"
    empty-text="暂无数据"
    show-checkbox
    highlight-current
>
    <template v-slot="{ data }">
        <span
            :data-roleId="data.id"
            :class="{ ve_tree_item: data.type === 2 }" <!-- 只是为了改按钮排列样式，不影响 -->
        >
            {{ data.name }}
        </span>
    </template>
</el-tree>

const checkStrictly = ref(false);
const tree = ref(null);
const menuList = ref([]);

/**
0: {id: '-1', parentId: '2', name: '阿紫'}
1: {id: '10', parentId: '7', name: '编辑'}
2: {id: '11', parentId: '7', name: '添加子级'}
3: {id: '12', parentId: '7', name: '添加按钮'}
4: {id: '13', parentId: '2', name: '角色管理'}
5: {id: '14', parentId: '13', name: '查询'}
6: {id: '15', parentId: '13', name: '添加'}
7: {id: '16', parentId: '13', name: '编辑'}
8: {id: '17', parentId: '1', name: '参考资料'}
9: {id: '18', parentId: '17', name: 'vue3.0'}
10: {id: '19', parentId: '17', name: 'element-plus'}
11: {id: '2', parentId: '1', name: '系统设置'}
12: {id: '3', parentId: '2', name: '用户管理'}
13: {id: '4', parentId: '3', name: '查询'}
14: {id: '5', parentId: '3', name: '添加'}
15: {id: '6', parentId: '3', name: '编辑'}
16: {id: '7', parentId: '2', name: '菜单管理'}
17: {id: '8', parentId: '7', name: '查询'}
18: {id: '9', parentId: '7', name: '添加'}
*/
function getAllMenuList(){
  //返回上面注释的结构数据
}

/**
组装成树
(2) [{…}, {…}]
0:
  children: (4) [{…}, {…}, {…}, {…}]
  id: "2"
  iframe: 1
  menu: ""
  name: "系统设置"
  parentId: "1"
1:
  children: (2) [{…}, {…}]
  id: "17"
  name: "参考资料"
  parentId: "1"
*/
const getMenuList = async () => {
    const { success, data } = getAllMenuList();
    if (success) {
        menuList.value = data;
        const list = XE.mapTree(
            XE.toArrayTree(data, {
                sortKey: "sort",
            }),
            (item) => {
                if (item.children.length <= 0) {
                    delete item.children;
                }
                return item;
            }
        );
        menuList.value = list;
    }
};

onMounted(async () => {
    await getMenuList();
    nextTick(() => {
        setMenuStyle();
        tree.value.setCheckedNodes(menuList.value);  //默认全选
        if (title.value === "添加") {
            return;
        }
        checkStrictly.value = true;//设置el-tree严格模式
        let mids = getCurrentSelectIds() || ""; //只是Id就可以  '10,11,12' 或者 ['10', '11', '12']
        //递归反选
        let clearChecked = function (ml) {
            if (!ml) {
                return;
            }
            ml.forEach((c) => {
                if (mids.indexOf(c.id) < 0) {
                    tree.value.setChecked(c, false, true); //反选
                }
                clearChecked(c.children); 
            });
        };
        checkStrictly.value = false; //取消el-tree严格模式
        clearChecked(menuList.value); //递归反选
    });
});

/**
 * @description:改变按钮的排列样式
 * @param {*}
 * @return {*}
 */
const setMenuStyle = () => {
    let eles = document.getElementsByClassName("ve_tree_item");
    Array.from(eles).forEach((e) => {
        const roleId = e.dataset.roleid * 1;
        const index =
            treeFindPath(menuList.value, (item) => item.id === roleId).length -
            1;
        e.parentNode.parentNode.parentNode.style.paddingLeft =
            index * 18 + "px";
        let oldClass = e.parentNode.className;
        e.parentNode.className = oldClass + " fl p0";
    });
};