| | |
| | | </div> |
| | | </basic-container> |
| | | </el-aside> |
| | | <el-main> |
| | | <basic-container> |
| | | <div style="display: flex;justify-content: center"> |
| | | <div class="descBox"> |
| | | <el-descriptions :column="1" border class="margin-top" size="medium" title="属性信息"> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.name"></i> |
| | | 名称 |
| | | </template> |
| | | <el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.label"></i> |
| | | 标签 |
| | | </template> |
| | | <el-tag v-if="nodeRow.label">{{ nodeRow.label }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.implClass"></i> |
| | | 实现类 |
| | | </template> |
| | | <el-tooltip class="item" effect="dark" :content="nodeRow.implClass" placement="top-start"> |
| | | <el-tag v-if="nodeRow.implClass">{{ nodeRow.implClass }}</el-tag> |
| | | </el-tooltip> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.desc"></i> |
| | | 描述 |
| | | </template> |
| | | <el-tag v-if="nodeRow.description">{{ nodeRow.description }}</el-tag> |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | </div> |
| | | <div class="descBox"> |
| | | <el-descriptions :column="1" border class="margin-top" size="medium" title="属性信息"> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.name"></i> |
| | | 名称 |
| | | </template> |
| | | <el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.label"></i> |
| | | 标签 |
| | | </template> |
| | | <el-tag v-if="nodeRow.label">{{ nodeRow.label }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.implClass"></i> |
| | | 实现类 |
| | | </template> |
| | | <el-tag v-if="nodeRow.implClass">{{ nodeRow.implClass }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.desc"></i> |
| | | 描述 |
| | | </template> |
| | | <el-tag v-if="nodeRow.description">{{ nodeRow.description }}</el-tag> |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | </div> |
| | | <div class="descBox"> |
| | | <el-descriptions :column="1" border class="margin-top" size="medium" title="属性信息"> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.name"></i> |
| | | 名称 |
| | | </template> |
| | | <el-tag v-if="nodeRow.name">{{ nodeRow.name }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.label"></i> |
| | | 标签 |
| | | </template> |
| | | <el-tag v-if="nodeRow.label">{{ nodeRow.label }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.implClass"></i> |
| | | 实现类 |
| | | </template> |
| | | <el-tag v-if="nodeRow.implClass">{{ nodeRow.implClass }}</el-tag> |
| | | </el-descriptions-item> |
| | | <el-descriptions-item :contentStyle="descriptionOption.contentStyle" |
| | | :labelStyle="descriptionOption.labelStyle"> |
| | | <template slot="label"> |
| | | <i :class="icons.desc"></i> |
| | | 描述 |
| | | </template> |
| | | <el-tag v-if="nodeRow.description">{{ nodeRow.description }}</el-tag> |
| | | </el-descriptions-item> |
| | | </el-descriptions> |
| | | </div> |
| | | </div> |
| | | |
| | | </basic-container> |
| | | </el-main> |
| | | </el-container> |
| | | </template> |
| | | |
| | |
| | | name: "index", |
| | | data() { |
| | | return { |
| | | form:{ |
| | | |
| | | }, |
| | | nodeRow:{}, |
| | | treeOption: { |
| | | height: 'auto', |
| | | defaultExpandAll: false, |
| | |
| | | children: 'children' |
| | | } |
| | | }, |
| | | treeData: [] |
| | | treeData: [], |
| | | descriptionOption: { |
| | | labelStyle: 'text-align:center;min-width:80px;', |
| | | contentStyle: 'width:200px;text-align:center;word-break;break-all;' |
| | | }, |
| | | icons: { |
| | | id: 'el-icon-finished', |
| | | name: 'el-icon-tickets', |
| | | desc: 'el-icon-chat-line-square' |
| | | }, |
| | | } |
| | | }, |
| | | created() { |
| | |
| | | }); |
| | | this.treeData = data; |
| | | }) |
| | | } |
| | | }, |
| | | |
| | | // 树点击 |
| | | nodeClick(row){ |
| | | console.log(row); |
| | | this.nodeRow = row; |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | |
| | | text-align: center; |
| | | padding-left: 4.5px; |
| | | } |
| | | .descBox{ |
| | | width: 32%; |
| | | margin-left: 20px; |
| | | } |
| | | </style> |