leftAsideTree.vue 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <!-- 左侧树结构 -->
  2. <template>
  3. <div class="left-aside">
  4. <el-tree :data="treeData" :props="defaultProps" accordion @current-change="changeNode">
  5. </el-tree>
  6. </div>
  7. </template>
  8. <script>
  9. import { queryCategoryGraph } from "@/api/home"
  10. export default {
  11. data() {
  12. return {
  13. defaultProps: {
  14. children: 'categoryList',
  15. label: 'name'
  16. },
  17. treeData: []
  18. };
  19. },
  20. mounted() {
  21. this.getCategoryGraph();
  22. },
  23. methods: {
  24. changeNode(data, node) {
  25. if (node.isLeaf) {
  26. this.$emit('changeNode', data)
  27. }
  28. },
  29. //// 接口
  30. // 获取系统图类型
  31. getCategoryGraph() {
  32. const pa = {
  33. switch: false
  34. };
  35. queryCategoryGraph(pa).then(res => {
  36. this.treeData = res.content;
  37. if (!res.content.length) {
  38. this.$emit('noTree')
  39. }
  40. })
  41. }
  42. },
  43. };
  44. </script>
  45. <style lang="less" scoped>
  46. .left-aside {
  47. background: #f7f9fa;
  48. color: #1F2429;
  49. width: 100%;
  50. height: calc(100% - 49px);
  51. padding-left: 6px;
  52. .el-tree {
  53. background: #f7f9fa;
  54. /deep/ .el-tree-node {
  55. &.is-current {
  56. & > .el-tree-node__content {
  57. background: #e1f2ffff;
  58. color: #0091ffff;
  59. &:hover{
  60. background: #e1f2ffff;
  61. color: #0091ffff;
  62. }
  63. }
  64. }
  65. .el-tree-node__content {
  66. height: 38px;
  67. line-height: 38px;
  68. &:hover {
  69. background: #F5F6F7;
  70. color: #1F2429;
  71. }
  72. }
  73. }
  74. }
  75. }
  76. </style>