提交 a927e436 authored 作者: junjie's avatar junjie

refactor: 前端tree组件以及拉宽线优化

上级 b3d751a2
<template xmlns:el-col="http://www.w3.org/1999/html"> <template xmlns:el-col="http://www.w3.org/1999/html">
<el-col> <el-col class="tree-style">
<!-- group --> <!-- group -->
<el-col v-if="!sceneMode"> <el-col v-if="!sceneMode">
<el-row class="title-css"> <el-row class="title-css">
...@@ -1040,4 +1040,9 @@ export default { ...@@ -1040,4 +1040,9 @@ export default {
.father:hover .child { .father:hover .child {
display: inline; display: inline;
} }
.tree-style {
padding: 10px 15px;
height: 100%;
overflow-y: auto;
}
</style> </style>
...@@ -57,7 +57,7 @@ export default { ...@@ -57,7 +57,7 @@ export default {
<style scoped> <style scoped>
.ms-aside-container { .ms-aside-container {
height: calc(100vh - 56px); height: calc(100vh - 56px);
padding: 10px 15px; padding: 0 0;
min-width: 260px; min-width: 260px;
max-width: 460px; max-width: 460px;
} }
......
...@@ -55,6 +55,7 @@ export default { ...@@ -55,6 +55,7 @@ export default {
height: 50vh; height: 50vh;
min-width: 180px; min-width: 180px;
max-width: 280px; max-width: 280px;
padding: 0 0;
} }
.ms-main-container { .ms-main-container {
......
<template> <template>
<el-col> <el-col class="tree-style">
<!-- group --> <!-- group -->
<el-col v-if="!sceneMode" v-loading="dsLoading"> <el-col v-if="!sceneMode" v-loading="dsLoading">
<el-row class="title-css"> <el-row class="title-css">
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</el-row> </el-row>
<el-col class="custom-tree-container"> <el-col class="custom-tree-container">
<div class="block"> <div class="block" :style="treeStyle">
<el-tree <el-tree
:default-expanded-keys="expandedArray" :default-expanded-keys="expandedArray"
:data="data" :data="data"
...@@ -80,6 +80,11 @@ import { authModel } from '@/api/system/sysAuth' ...@@ -80,6 +80,11 @@ import { authModel } from '@/api/system/sysAuth'
export default { export default {
name: 'DatasetGroupSelectorTree', name: 'DatasetGroupSelectorTree',
props: { props: {
fixHeight: {
type: Boolean,
required: false,
default: false
},
customType: { customType: {
type: Array, type: Array,
required: false, required: false,
...@@ -141,7 +146,11 @@ export default { ...@@ -141,7 +146,11 @@ export default {
id: 'id', id: 'id',
parentId: 'pid' parentId: 'pid'
}, },
isTreeSearch: false isTreeSearch: false,
treeStyle: this.fixHeight ? {
height: '200px',
overflow: 'auto'
} : {}
} }
}, },
computed: {}, computed: {},
...@@ -520,4 +529,9 @@ export default { ...@@ -520,4 +529,9 @@ export default {
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.tree-style {
padding: 10px;
height: 100%;
overflow-y: auto;
}
</style> </style>
...@@ -60,8 +60,10 @@ export default { ...@@ -60,8 +60,10 @@ export default {
// })() // })()
// } // }
// this.height = window.innerHeight / 3 // this.height = window.innerHeight / 3
this.height = document.getElementById('dsData').parentNode.offsetHeight - 16 - 14 - 5 this.$nextTick(() => {
this.initData() this.height = document.getElementById('dsData').parentNode.offsetHeight - 16 - 14 - 5
this.initData()
})
}, },
methods: { methods: {
initData() { initData() {
......
<template> <template>
<el-col> <el-col class="tree-style">
<!-- group --> <!-- group -->
<el-col v-if="!sceneMode"> <el-col v-if="!sceneMode">
<el-row class="title-css"> <el-row class="title-css">
...@@ -996,4 +996,9 @@ export default { ...@@ -996,4 +996,9 @@ export default {
align-items: center; align-items: center;
width: 100% width: 100%
} }
.tree-style {
padding: 10px 15px;
height: 100%;
overflow-y: auto;
}
</style> </style>
...@@ -78,7 +78,7 @@ export default { ...@@ -78,7 +78,7 @@ export default {
<style scoped> <style scoped>
.ms-aside-container { .ms-aside-container {
height: calc(100vh - 56px); height: calc(100vh - 56px);
padding: 10px 15px; padding: 0 0;
min-width: 260px; min-width: 260px;
max-width: 460px; max-width: 460px;
} }
......
<template> <template>
<de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]"> <de-container v-loading="$store.getters.loadingMap[$store.getters.currentPath]">
<de-aside-container style="padding: 10px 15px;"> <de-aside-container style="padding: 0 0;">
<ds-tree ref="dsTree" @switch-main="switchMain" /> <ds-tree ref="dsTree" @switch-main="switchMain" />
</de-aside-container> </de-aside-container>
<de-main-container> <de-main-container>
......
<template xmlns:el-col="http://www.w3.org/1999/html"> <template xmlns:el-col="http://www.w3.org/1999/html">
<el-col> <el-col class="tree-style">
<el-col> <el-col>
<el-row class="title-css"> <el-row class="title-css">
<span class="title-text"> <span class="title-text">
...@@ -301,4 +301,9 @@ export default { ...@@ -301,4 +301,9 @@ export default {
.father:hover .child { .father:hover .child {
display: inline; display: inline;
} }
.tree-style {
padding: 10px 15px;
height: 100%;
overflow-y: auto;
}
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论