FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

国内标准树形菜单调整

Browse Source
This commit is contained in:
shenyanpei
2021-09-09 13:44:14 +08:00
parent 6307c6270b
commit 0ceeaae50d
1 changed files with 43 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/regulatoryRepository/domesticStandardsAndRegulations/index.vue
+43 -41
View File
@@ -2,54 +2,58 @@
<template> <template>
<div id="domesticStandardDatabase" :class="{ 'tree-close': sideClose }" class="demo-spin-article v-class"> <div id="domesticStandardDatabase" :class="{ 'tree-close': sideClose }" class="demo-spin-article v-class">
<div class="tree-content" :class="{ 'tree-closed': sideClose }"> <div class="tree-content" :class="{ 'tree-closed': sideClose }">
<div class="tree"> <div style="width: 100%">
<el-input <el-input
placeholder="输入树状图体系" placeholder="输入树状图体系"
v-model="filterText"> v-model="filterText">
</el-input> </el-input>
<el-tree <div class="tree">
ref="tree" <el-card style="height: 100%;padding-right: 120px;">
node-key="id" <el-tree
class="tree-line" ref="tree"
icon-class="icon-tree" node-key="id"
:indent="0" class="tree-line"
:props="props" icon-class="icon-tree"
:data="treeList" :indent="0"
highlight-current :props="props"
@node-click="treeClick" :data="treeList"
:filter-node-method="filterNode" highlight-current
default-expand-all @node-click="treeClick"
:expand-on-click-node="false"> :filter-node-method="filterNode"
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" default-expand-all
@mouseleave="mouseleave(data)"> :expand-on-click-node="false">
<span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)"
@mouseleave="mouseleave(data)">
<span <span
:class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span> :class="data.children.length !== 0 ? 'is-show' : 'is-leaf-none'"></span>
<span class="node-font" > {{ node.label }} </span> <span> {{ node.label}} </span>
<span> <span>
<el-button <el-button
type="text" type="text"
size="mini" size="mini"
v-show="data.show" v-show="data.show"
@click="() => append(data)"> @click="() => append(data)">
新增 新增
</el-button> </el-button>
<el-button <el-button
type="text" type="text"
size="mini" size="mini"
v-show="data.show" v-show="data.show"
@click="() => update(data)"> @click="() => update(data)">
编辑 编辑
</el-button> </el-button>
<el-button <el-button
type="text" type="text"
size="mini" size="mini"
v-show="data.showDel" v-show="data.showDel"
@click="() => remove(node, data)"> @click="() => remove(node, data)">
删除 删除
</el-button> </el-button>
</span> </span>
</span> </span>
</el-tree> </el-tree>
</el-card>
</div>
</div> </div>
<div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }"> <div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
<!--切换折叠样式--> <!--切换折叠样式-->
@@ -4987,7 +4991,6 @@ export default {
background: url('~@/assets/images/shangqi/img/tree.png'); background: url('~@/assets/images/shangqi/img/tree.png');
background-size: 100% 100%; background-size: 100% 100%;
} }
/deep/ .tree-line { /deep/ .tree-line {
.el-tree-node { .el-tree-node {
position: relative; position: relative;
@@ -5049,7 +5052,7 @@ export default {
} }
</style> </style>
<style lang="less" > <style lang="less" scoped>
@import '~@/assets/styles/mixins'; @import '~@/assets/styles/mixins';
@import '~@/assets/styles/style'; @import '~@/assets/styles/style';
@@ -5065,15 +5068,15 @@ export default {
position: relative; position: relative;
.tree { .tree {
/deep/.el-card__body {
padding: 0 !important;
}
.el-card {
min-width: min-content;
}
width: calc(~'100% - 15px'); width: calc(~'100% - 15px');
position: absolute; position: absolute;
left: 0; left: 0;
.node-font{
display: inline-block;
width: 120px;
text-overflow:ellipsis;
overflow: hidden;
}
} }
.tree-collapse { .tree-collapse {
@@ -5118,7 +5121,6 @@ export default {
.tree { .tree {
left: -200px !important; left: -200px !important;
} }
.tree-right { .tree-right {
width: calc(~'100% - 15px') !important; width: calc(~'100% - 15px') !important;
} }