element-plus中,el-tree叶子节点有三角箭头,且点击箭头,箭头不旋转,如何解决?
问题描述
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>
错误截图
回复
1个回答
test
2024-07-06
这个是CSS控制的,你贴出来的代码没用,有没有别的地方覆盖了原来的样式
原理就是在展开的时候 expanded
<i class="el-icon el-tree-node__expand-icon expanded">...</i>
实现一个css样式
.el-tree-node__expand-icon.expanded {
transform: rotate(90deg);
}
你是不是把它自带的样式覆盖了
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容