style: modify

develop
时启龙 2024-11-19 17:17:04 +08:00
parent f64b12a86a
commit e2077c4c96
3 changed files with 23 additions and 33 deletions

View File

@ -3,18 +3,16 @@
<div class="operate"> <div class="operate">
<el-input class="filter-input" v-model="filterText" size="mini" placeholder="请输入模型关键字进行过滤" clearable> </el-input> <el-input class="filter-input" v-model="filterText" size="mini" placeholder="请输入模型关键字进行过滤" clearable> </el-input>
</div> </div>
<el-scrollbar class="custom-scrollbar" style="height: calc(100% - 50px)"> <el-tree class="tree" :data="data" ref="treeRef" highlight-current node-key="id" current-node-key="" @node-click="handleNodeClick" :props="defaultProps" :filter-node-method="filterNode">
<el-tree class="tree" :data="data" ref="treeRef" highlight-current node-key="id" current-node-key="" @node-click="handleNodeClick" :props="defaultProps" :filter-node-method="filterNode"> <span class="custom-tree-node" slot-scope="{ node, data }">
<span class="custom-tree-node" slot-scope="{ node, data }"> <div class="custom-tree-node-wrapper">
<div class="custom-tree-node-wrapper"> <span class="custom-tree-node-label">
<span class="custom-tree-node-label"> <img class="custom-tree-node-img" v-if="data.iconImage" :src="data.iconImage" alt="" />
<img class="custom-tree-node-img" v-if="data.iconImage" :src="data.iconImage" alt="" /> {{ node.label }}
{{ node.label }} </span>
</span> </div>
</div> </span>
</span> </el-tree>
</el-tree>
</el-scrollbar>
</div> </div>
</template> </template>
@ -99,7 +97,7 @@ export default defineComponent({
filterText, filterText,
treeRef, treeRef,
handleNodeClick, handleNodeClick,
getData getData,
} }
}, },
}) })

View File

@ -6,9 +6,7 @@
<i class="el-icon-plus cur-point m-l-xs" @click="handleCreateNode({ title: '新增根分组', operateType: 'create', isRoot: true, type: 'group' })"></i> <i class="el-icon-plus cur-point m-l-xs" @click="handleCreateNode({ title: '新增根分组', operateType: 'create', isRoot: true, type: 'group' })"></i>
</el-tooltip> </el-tooltip>
</div> </div>
<el-scrollbar class="custom-scrollbar"> <Tree ref="tree" :filterText="filterText" :isShowOperate="type === 'normal' ? true : false" v-on="$listeners" v-bind="$attrs" @handleCreate="handleCreate" @remove="remove" @handleNodeClick="$emit('handleNodeClick', $event)"></Tree>
<Tree ref="tree" :filterText="filterText" :isShowOperate="type === 'normal' ? true : false" v-on="$listeners" v-bind="$attrs" @handleCreate="handleCreate" @remove="remove" @handleNodeClick="$emit('handleNodeClick', $event)"></Tree>
</el-scrollbar>
<AddNode :addData="addData" v-if="addData.dialog" @update-success="updateSuccess"></AddNode> <AddNode :addData="addData" v-if="addData.dialog" @update-success="updateSuccess"></AddNode>
</el-card> </el-card>
</template> </template>
@ -100,8 +98,4 @@ export default {
padding: 20px 10px; padding: 20px 10px;
height: 100%; height: 100%;
} }
.custom-scrollbar {
height: calc(100% - 80px);
width: 100%;
}
</style> </style>

View File

@ -1,19 +1,17 @@
<template> <template>
<div class="side-menu"> <div class="side-menu">
<el-input placeholder="输入关键字进行过滤" v-model="filterText" class="m-b" clearable> </el-input> <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="m-b" clearable> </el-input>
<el-scrollbar class="custom-scrollbar" style="height: calc(100% - 130px)"> <el-tree class="tree" highlight-current node-key="id" :load="loadNode" @node-click="handleNodeClick" lazy :props="{ label: 'name', children: 'childrenGroups', isLeaf: isLeaf }" :filter-node-method="filterNode" ref="treeRef">
<el-tree class="tree" highlight-current node-key="id" :load="loadNode" @node-click="handleNodeClick" lazy :props="{ label: 'name', children: 'childrenGroups', isLeaf: isLeaf }" :filter-node-method="filterNode" ref="treeRef"> <span class="custom-tree-node" slot-scope="{ node, data }">
<span class="custom-tree-node" slot-scope="{ node, data }"> <div class="custom-tree-node-wrapper">
<div class="custom-tree-node-wrapper"> <span class="custom-tree-node-label">
<span class="custom-tree-node-label"> <img class="custom-tree-node-img" v-if="data.iconImage" :src="data.iconImage" alt="" />
<img class="custom-tree-node-img" v-if="data.iconImage" :src="data.iconImage" alt="" /> {{ node.label }}
{{ node.label }} <span v-if="data.type === 'module'" class="m-l-xs">({{ data.instanceNum }})</span>
<span v-if="data.type === 'module'" class="m-l-xs">({{ data.instanceNum }})</span> </span>
</span> </div>
</div> </span>
</span> </el-tree>
</el-tree>
</el-scrollbar>
</div> </div>
</template> </template>