|
@@ -18,39 +18,42 @@
|
|
|
</el-icon>
|
|
|
</el-button>
|
|
|
</div>
|
|
|
- <el-tree
|
|
|
- :data="data"
|
|
|
- ref="tree"
|
|
|
- node-key="id"
|
|
|
- @node-click="treeChange"
|
|
|
- default-expand-all
|
|
|
- :filter-node-method="filterNode"
|
|
|
- >
|
|
|
- <template #default="{ node, data }">
|
|
|
- <div class="custom-tree-node">
|
|
|
- <div style="flex: 1">{{ node.label }}</div>
|
|
|
- <div style="float: right">
|
|
|
- <el-icon :size="17" @click.stop="() => edit(node, data)">
|
|
|
- <Edit />
|
|
|
- </el-icon>
|
|
|
- <el-icon
|
|
|
- :size="17"
|
|
|
- style="margin-left: 10px"
|
|
|
- @click.stop="() => add(data)"
|
|
|
- >
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- <el-icon
|
|
|
- :size="17"
|
|
|
- style="margin-left: 10px"
|
|
|
- @click.stop="() => del(data)"
|
|
|
- >
|
|
|
- <Delete />
|
|
|
- </el-icon>
|
|
|
+ <div class="box">
|
|
|
+ <el-tree
|
|
|
+ :data="data"
|
|
|
+ ref="tree"
|
|
|
+ node-key="id"
|
|
|
+ @node-click="treeChange"
|
|
|
+ default-expand-all
|
|
|
+ :filter-node-method="filterNode"
|
|
|
+ >
|
|
|
+ <template #default="{ node, data }">
|
|
|
+ <div class="custom-tree-node">
|
|
|
+ <div style="flex: 1">{{ node.label }}</div>
|
|
|
+ <div style="float: right; width: 71px; margin-left: 10px">
|
|
|
+ <el-icon :size="17" @click.stop="() => edit(node, data)">
|
|
|
+ <Edit />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon
|
|
|
+ :size="17"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ @click.stop="() => add(data)"
|
|
|
+ >
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ <el-icon
|
|
|
+ :size="17"
|
|
|
+ style="margin-left: 10px"
|
|
|
+ @click.stop="() => del(data)"
|
|
|
+ >
|
|
|
+ <Delete />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </el-tree>
|
|
|
+ </template>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+
|
|
|
<el-dialog
|
|
|
:title="treeModalType == 'add' ? '添加分类' : '编辑分类'"
|
|
|
v-model="treeModal"
|
|
@@ -247,6 +250,8 @@ const handleMouseOver = (data) => {
|
|
|
height: 100%;
|
|
|
background: #fff;
|
|
|
padding: 20px;
|
|
|
+ height: calc(100vh - 140px);
|
|
|
+
|
|
|
.search {
|
|
|
margin-bottom: 20px;
|
|
|
.el-input {
|
|
@@ -255,5 +260,26 @@ const handleMouseOver = (data) => {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
+ // .searh,.title,.box{
|
|
|
+ // padding-left:20px ;
|
|
|
+ // }
|
|
|
+ .box {
|
|
|
+ padding-right: 0px;
|
|
|
+ height: calc(100vh - 270px);
|
|
|
+ overflow-y: auto;
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-tree-node__content {
|
|
|
+ display: block;
|
|
|
+ // padding-left: 24px !important;
|
|
|
+ // position: relative;
|
|
|
+}
|
|
|
+.el-tree-node__content > .el-tree-node__expand-icon {
|
|
|
+ // position: absolute;
|
|
|
+ // left: 0px;
|
|
|
+}
|
|
|
+.el-tree-node > .el-tree-node__children {
|
|
|
+ overflow: visible;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|