12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576 |
- <!-- 左侧树结构 -->
- <template>
- <div class="left-aside">
- <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode">
- </el-tree>
- </div>
- </template>
- <script>
- import { queryCategoryGraph } from "@/api/home"
- export default {
- data() {
- return {
- defaultProps: {
- children: 'categoryList',
- label: 'name'
- },
- treeData: []
- };
- },
- mounted() {
- this.getCategoryGraph();
- },
- methods: {
- changeNode(data, node) {
- if (node.isLeaf) {
- this.$emit('changeNode', data)
- }
- },
- //// 接口
- // 获取系统图类型
- getCategoryGraph() {
- const pa = {
- switch: false
- };
- queryCategoryGraph(pa).then(res => {
- this.treeData = res.content;
- if (!res.content.length) {
- this.$emit('noTree')
- }
- })
- }
- },
- };
- </script>
- <style lang="less" scoped>
- .left-aside {
- background: #f7f9fa;
- color: #1F2429;
- width: 100%;
- height: calc(100% - 49px);
- padding-left: 6px;
- .el-tree {
- background: #f7f9fa;
- /deep/ .el-tree-node {
- &.is-current {
- & > .el-tree-node__content {
- background: #e1f2ffff;
- color: #0091ffff;
- &:hover{
- background: #e1f2ffff;
- color: #0091ffff;
- }
- }
- }
- .el-tree-node__content {
- height: 38px;
- line-height: 38px;
- &:hover {
- background: #F5F6F7;
- color: #1F2429;
- }
- }
- }
- }
- }
- </style>
|