将树状数据使用css与jq编写成为表格样式
这首页上的边框我没有处理。css需要进行调整一下
<template>
<div>
<el-card class="anoCard">
<el-button type="primary" @click="GetAllPermissionList">添加角色</el-button>
</el-card>
<el-dialog title="添加角色" :visible.sync="dialogVisible" width="800px">
<div class="table">
<el-tree
class="Tree"
show-checkbox
:data="allMenu"
node-key="permissionId"
:props="menuProps"
ref="menuTree"
:check-on-click-node="true"
:default-expand-all="true"
:expand-on-click-node="false"
>
<!--check-on-click-node 是否在点击节点的时候选中节点,默认值为 false,即只有在点击复选框时才会选中节点。 -->
<!--default-expand-all 是否默认展开所有节点 -->
<!--expand-on-click-node 是否在点击节点的时候展开或者收缩节点, 默认值为 true,如果为 false,则只有点箭头图标的时候才会展开或者收缩节点 -->
<!--check-strictly 在显示复选框的情况下,是否严格的遵循父子不互相关联的做法,默认为 false -->
<!-- 自定义节点内容 -->
<span class="custom-tree-node" slot-scope="{ node, data }" >
<!-- <span class=especially>{{ node.label }}</span> -->
<span >{{ node.label }}</span>
</span>
</el-tree>
<button @click="getky">111111</button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getAllPermissionList } from "@/api/xxxx";
export default {
// 组件名称
name: "",
// 组件参数 接收来自父组件的数据
props: {},
// 局部注册的组件
components: {},
// 组件状态值
data() {
return {
dialogVisible: false,//弹框显示
allMenu: [],//tree数据
menuProps: {
label: "menuName",
children: "sonPermissionList",
},//props的数据
};
},
created() {
this.$nextTick(() => {
this.changeTreeClass()
})
},
mounted() {},
// 计算属性
computed: {},
// 侦听器
watch: {},
// 组件方法
methods: {
//获取选择的所有关键id值,这个id为prop中绑定的唯一值是一个[]
getky(){
let arr = this.$refs.menuTree.getCheckedKeys().concat(this.$refs.menuTree.getHalfCheckedKeys())
// concat 将多个数组连接起来
let arr1 = this.$refs.menuTree.getCheckedKeys()
let arr2 = this.$refs.menuTree.getHalfCheckedKeys()
let Arr=[...arr1,...arr2]
// ...扩展运算符号
console.log('Arr',Arr);
},
// 获取角色权限选择tree数据
//这里后端返回的是树状结构数据不需要树状转换
GetAllPermissionList() {
this.dialogVisible = true;
getAllPermissionList().then((res) => {
const dd=res.data
// 为了删除子节点父节点中值为null的属性才有了下面的递归函数,也可以直接赋值
// dd.forEach(item=>{
// if (item.sonPermissionList == null) {
// delete item.sonPermissionList
// }else{
// this.recursion(item.sonPermissionList)
// }
// return dd
// })
this.allMenu = dd;
});
},
// recursion(data){
// data.forEach(item=>{
// if (item.sonPermissionList == null) {
// delete item.sonPermissionList
// }else{
// this.recursion(item.sonPermissionList)
// }
// })
// },
// 改变tree节点样式
changeTreeClass() {
// 找到之前做标记的class
var classDomList = document.getElementsByClassName('especially')
// 改变这几个样式
for (var i = 0; i < classDomList.length; i++) {
classDomList[i].parentNode.parentNode.style.cssText = 'width: auto;border: none;'
classDomList[i].parentNode.parentNode.parentNode.style.cssText = 'border: none;'
classDomList[i].parentNode.parentNode.nextSibling.style.cssText = 'display: none;'
}
}
},
};
</script>
<style lang="scss" scoped>
.table {
// overflow: auto;
// height: 100%;
width: 100%;
display:flex; justify-content:center; align-items:center;
::v-deep .el-tree {
border-left: 1px solid #000;
.el-tree-node__content {
border-bottom: 1px #000 solid;
padding: 5px 10px !important;
width: 140px;
height: auto;
.el-tree-node__expand-icon.el-icon-caret-right{
display: none;
}
}
.el-tree-node {
padding: 0 !important;
display: flex;
}
.el-checkbox.is-disabled.is-checked {
.el-checkbox__inner{
background-color: #363554 !important;
border-color: #363554 !important;
}
}
// 最后一项空白表格取消显示 el-tree-node is-expanded is-focusable
.el-tree-node .is-expanded .is-focusable{
.el-tree-node__children:last-child{
display: none;
}
}
.el-tree-node .is-expanded .is-focusable:last-child{
border-bottom: none;
}
.el-tree-node__children {
display: flex;
flex-direction: column;
.el-tree-node{
display: flex;
padding: 0px !important;
border-bottom: 1px #000 solid;
.el-tree-node__content{
width: 200px;
border-left: 1px #000000 solid;
// border-right: 1px #000000 solid;
border-bottom: none;
.custom-tree-node {
height: 24px;
display: flex;
align-items: center;
.tree-btn {
margin-left: 10px;
display: none;
}
.el-button{
padding: 0px !important;
border-radius: 4px;
background: #363554;
color: #ffffff;
}
}
}
.el-tree-node__children{
width: 210px;
border-right:1px solid #000 ;
flex-direction: row;
flex-wrap: wrap;
}
// .el-tree-node__children:last-child{
// display: none;
// }
}
.el-tree-node.is-checked{
.tree-btn {
display: block !important;
}
}
}
}
}
}
</style>
::v-deep .el-tree {
margin: 20px;
border-bottom: 1px #e2e1e1 solid !important;
.el-tree-node__content {
border-top: 1px #e2e1e1 solid;
padding: 5px 10px !important;
width: 300px;
height: auto;
.el-tree-node__expand-icon.el-icon-caret-right {
display: none;
}
}
.el-tree-node {
padding: 0 !important;
display: flex;
}
.el-tree-node__children {
display: flex;
flex-direction: column;
.el-tree-node {
display: flex;
padding: 0px !important;
.el-tree-node__content {
width: 400px;
.custom-tree-node {
height: 24px;
display: flex;
align-items: baseline;
.tree-btn {
margin-left: 10px;
display: none;
}
.el-button {
padding: 0px !important;
border-radius: 4px;
background: #363554;
color: #ffffff;
}
}
}
.el-tree-node__children {
width: 300px;
flex-direction: row;
flex-wrap: wrap;
}
}
.el-tree-node.is-checked {
.tree-btn {
display: block !important;
}
}
}
}