| | |
| | | @node-click="handleNodeClick" |
| | | > |
| | | <span class="custom-tree-node" slot-scope="{ node, data }"> |
| | | <span>{{ node.label }}</span> |
| | | <span class="tree-node-label">{{ node.label }}</span> |
| | | <span v-if="data.id > 0"> |
| | | <el-button |
| | | type="text" |
| | |
| | | icon="el-icon-plus" |
| | | size="medium" |
| | | @click="handleAdd" |
| | | |
| | | >新增</el-button |
| | | > |
| | | </el-col> |
| | |
| | | this.classifyform = b; |
| | | this.dialogFormVisible = true; |
| | | }, |
| | | Newcategory(){ |
| | | this.classifyform= {}, //类别表单 |
| | | this.radio = "主分类"; |
| | | this.dialogFormVisible = true |
| | | this.zifon = true; |
| | | Newcategory() { |
| | | (this.classifyform = {}), //类别表单 |
| | | (this.radio = "主分类"); |
| | | this.dialogFormVisible = true; |
| | | this.zifon = true; |
| | | this.zufon = true; |
| | | }, |
| | | |
| | |
| | | display: flex; |
| | | } |
| | | .sidecolumn { |
| | | width: 400px; |
| | | width: 380px; |
| | | min-height: 100vh; |
| | | text-align: center; |
| | | // display: flex; |
| | |
| | | cursor: pointer; |
| | | } |
| | | } |
| | | /* 核心:设置固定宽度,超出部分显示省略号 */ |
| | | .tree-node-label { |
| | | display: inline-block; /* 需要设置为行内块级元素才能设置宽度 */ |
| | | max-width: 160px; /* 最大宽度 */ |
| | | overflow: hidden; |
| | | white-space: nowrap; /* 不换行 */ |
| | | text-overflow: ellipsis; /* 显示省略号 */ |
| | | vertical-align: bottom; /* 可选的,用于对齐 */ |
| | | } |
| | | |
| | | /* 可选:鼠标悬停时取消限制,显示全文(可能会撑开布局) */ |
| | | .custom-tree-node:hover .tree-node-label { |
| | | max-width: none; |
| | | white-space: normal; |
| | | overflow: visible; |
| | | } |
| | | .center-ss { |
| | | margin-top: 30px; |
| | | .input-with-select { |