| | |
| | | <template> |
| | | <el-container> |
| | | <!-- 顶端按钮 --> |
| | | <el-header class="businessHeader" style="height: 40px;"> |
| | | <div> |
| | | <el-button type="primary" @click="linkTypeAdd" size="small" icon="el-icon-plus" v-if="permissionList.addBtn"> |
| | | 新增 |
| | | </el-button> |
| | | <el-button type="primary" @click="linkTypeEdit" size="small" icon="el-icon-edit" v-if="permissionList.editBtn"> |
| | | 修改 |
| | | </el-button> |
| | | </div> |
| | | </el-header> |
| | | |
| | | <!-- 侧边栏树 --> |
| | | <el-container> |
| | | <el-aside width="240px"> |
| | | <el-aside style="width: 20%;"> |
| | | <basic-container class="businessTreeContainer"> |
| | | <p style="margin-top: 10px;font-weight: 570;font-size: 19px">{{ treeOption.title }}</p> |
| | | <avue-tree id="basic" :data="treeData" :option="treeOption" @node-click="nodeClick" |
| | | class="businessTree"> |
| | | <span class="el-tree-node__label" slot-scope="{ node, data }"> |
| | | <div class="app"> |
| | | <div style="display: flex;margin-bottom: 10px;"> |
| | | <el-button type="primary" @click="linkTypeAdd" size="mini" v-if="permissionList.addBtn" plain> |
| | | 新增 |
| | | </el-button> |
| | | <el-button type="primary" @click="linkTypeEdit" size="mini" v-if="permissionList.editBtn" plain> |
| | | 修改 |
| | | </el-button> |
| | | </div> |
| | | <avue-tree :data="treeData" :option="treeOption" @node-click="nodeClick" |
| | | class="businessTree"> |
| | | <template class="el-tree-node__label" slot-scope="{ node, data }"> |
| | | <span> |
| | | <i class="el-icon-star-on"></i> |
| | | {{ (node || {}).label }} |
| | | </span> |
| | | </span> |
| | | </template> |
| | | </avue-tree> |
| | | </div> |
| | | </basic-container> |
| | | </el-aside> |
| | | <el-container> |
| | |
| | | }, |
| | | loadOption: { |
| | | border: true, |
| | | height: 395, |
| | | height: 'auto', |
| | | editBtn: false, |
| | | addBtn: false, |
| | | menu: false, |
| | |
| | | }, |
| | | obj: {}, |
| | | treeOption: { |
| | | height:'auto', |
| | | defaultExpandAll: true, |
| | | title: '链接类型树', |
| | | addBtn: false, |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | <style lang="scss" scoped> |
| | | .attributeCrud>.el-card:nth-of-type(2)>.el-card__body>.avue-crud__menu { |
| | | display: none !important; |
| | | } |
| | | .app { |
| | | overflow: auto; |
| | | height: 84.3vh; |
| | | } |
| | | |
| | | .app::-webkit-scrollbar { |
| | | height: 15px; // 纵向滚动条 必写 |
| | | background: white; |
| | | border: white; |
| | | width: 10px; |
| | | |
| | | } |
| | | |
| | | // 滚动条的滑块 |
| | | .app::-webkit-scrollbar-thumb { |
| | | width: 10px; |
| | | height: 10px; |
| | | background-color: #ececec; |
| | | border-radius: 20px; |
| | | border: #ececec; |
| | | } |
| | | |
| | | |
| | | </style> |