<!--
|
* @Description:
|
* @Author: 王旭
|
* @Date: 2022-03-18 11:21:22
|
* @LastEditTime: 2022-03-18 15:20:27
|
* @LastEditors: 王旭
|
-->
|
<template>
|
<el-card
|
class="tree-card scrollbar box-card"
|
:body-style="{ padding: '18px 0' }"
|
>
|
<div slot="header" class="header_box">
|
<i class="title_circle"></i>
|
<span>{{ title }}</span>
|
</div>
|
<el-tree
|
:data="dataMenuTypes"
|
:props="defaultProps"
|
node-key="id"
|
:default-expanded-keys="[4]"
|
@node-click="handleNodeClick"
|
>
|
<span slot-scope="{ node, data }">
|
<i :class="data.icon"></i>
|
<span style="padding-left: 4px">{{ node.label }}</span>
|
</span>
|
</el-tree>
|
</el-card>
|
</template>
|
|
<script>
|
import { mapState, mapMutations } from "vuex";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
props: ["title"],
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
defaultProps: {
|
children: "children",
|
label: "label",
|
},
|
};
|
},
|
computed: {
|
...mapState(["dataMenuTypes"]),
|
},
|
//方法集合
|
methods: {
|
// 获取vuex中mutation里的方法
|
...mapMutations(["UP_REQUERT"]),
|
handleNodeClick(data) {
|
this.UP_REQUERT(data.datatype);
|
},
|
},
|
created() {},
|
};
|
</script>
|
<style lang="less" >
|
.el-tree-node.is-current > .el-tree-node__content {
|
background-color: rgba(0, 166, 226, 0.6) !important;
|
}
|
//@import url(); 引入公共css类
|
.tree-card {
|
overflow: auto;
|
height: 98%;
|
border-radius: 6px 6px 6px 6px;
|
/deep/ .el-card__header {
|
background: rgba(0, 166, 226, 0.6) !important;
|
box-shadow: 0px 0px 4px 0px rgba(14, 22, 32, 0.2);
|
border-radius: 6px 6px 0px 0px;
|
height: 42px;
|
font-size: 16px;
|
font-weight: 600;
|
border-bottom: 0;
|
padding: 10px;
|
}
|
.header_box {
|
display: flex;
|
.title_circle {
|
display: inline-block;
|
width: 22px;
|
height: 22px;
|
background: linear-gradient(-30deg, #00a5e5, #0e1620);
|
border-radius: 50%;
|
margin-right: 8px;
|
}
|
}
|
}
|
</style>
|
