element-plus中，el-tree叶子节点有三角箭头，且点击箭头，箭头不旋转,如何解决？

  • Z时代
  • 2024-02-13
  • 分类：IT

问题描述

element-plus中，el-tree叶子节点有三角箭头，且点击箭头，箭头不旋转

环境

vue3 + typescript + element-plus

相关代码

<template>
    <div>
        <div style="padding: 20px 20px 0 30px;">
            授权角色：{{ router.currentRoute.value.query.roleName }}
        </div>
        <el-tree
            style="margin: 20px 30px"
            ref="treeRef"
            :data="sysMenuList"
            node-key="id"
            show-checkbox
            default-expand-all
            :props="defaultProps"
        />
        <div style="padding: 20px 20px;">
            <el-button :loading="loading" type="primary" :icon="Check" @click="save">保存</el-button>
            <el-button @click="router.push('/sysRole')" :icon="RefreshRight">返回</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
import router from "../routes";
import { ElTree } from 'element-plus'
import {Check,RefreshRight} from "@element-plus/icons-vue"
import request from "../axios/request";
import {ElMessage} from "element-plus";
const treeRef = ref<InstanceType<typeof ElTree>>()
const loading = ref(false)
const checkedIds = ref<any>([])
let sysMenuList = ref([])
const defaultProps = {
    children: 'children',
    label: 'name',
    isLeaf: 'leaf'
}
const load = () => {
    const roleId = router.currentRoute.value.query.id
    request.get(`/admin/system/sysMenu/assign/${roleId}`).then(result => {
        sysMenuList.value = result.data
        console.log("sysMenuList",sysMenuList.value)
        //每次先清空
        checkedIds.value = []
        getCheckedIds(sysMenuList.value)
        console.log(checkedIds.value)
        console.log(sysMenuList.value)
        treeRef.value!.setCheckedKeys(checkedIds.value)
    })
}
/*
    得到所有选中的id列表
*/
const getCheckedIds = (arr) => {
    let len = arr.length
    for(let i=0;i < len;i++){
        if(arr[i].select && arr[i].children.length === 0){
            checkedIds.value.push(arr[i].id)
        }
        getCheckedIds(arr[i].children)
    }
}
/*
    保存权限列表
*/
const save = () => {
    //获取到当前子节点
    //const checkedNodes = this.$refs.tree.getCheckedNodes()
    //获取到当前子节点及父节点
    const allCheckedNodes = treeRef.value!.getCheckedNodes(false, true);
    let idList = allCheckedNodes.map(node => node.id);
    console.log(idList)
    let assignMenuVo = {
        roleId: router.currentRoute.value.query.id,
        menuIdList: idList
    }
    loading.value = true
    request.post("/admin/system/sysMenu/assign",assignMenuVo).then(res => {
        loading.value = false
        if (res.code === 200){
            ElMessage({
                message: '分配权限成功',
                type: 'success',
            })
            load()
        } else {
            ElMessage({
                message: res.msg,
                type: 'error',
            })
        }
        router.push('roleManagement');
    })
}
onMounted(() => {
    load()
})
</script>
<style scoped>
</style>

错误截图

element-plus中，el-tree叶子节点有三角箭头，且点击箭头，箭头不旋转,如何解决？

回答：

这个是CSS控制的，你贴出来的代码没用，有没有别的地方覆盖了原来的样式

原理就是在展开的时候 expanded

<i class="el-icon el-tree-node__expand-icon expanded">...</i>

实现一个css样式

.el-tree-node__expand-icon.expanded {
    transform: rotate(90deg);
}

你是不是把它自带的样式覆盖了

以上是 element-plus中，el-tree叶子节点有三角箭头，且点击箭头，箭头不旋转,如何解决？ 的全部内容， 来源链接： utcz.com/p/934000.html

回到顶部