| | |
| | | @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> |
| | |
| | | </div> |
| | | </div> |
| | | <!-- 添加类别弹框 --> |
| | | <el-dialog title="新增类别" width="30%" :visible.sync="dialogFormVisible"> |
| | | <el-dialog title="类别编辑" width="30%" :visible.sync="dialogFormVisible"> |
| | | <div style="text-align: center; margin-bottom: 20px"> |
| | | <el-radio-group v-model="radio"> |
| | | <el-radio-button label="主分类"></el-radio-button> |
| | |
| | | roleOptions: [], |
| | | // 表单参数 |
| | | form: {}, |
| | | title: "新增类别", |
| | | title: "类别编辑", |
| | | sidecolumnform: {}, //添加类别表单 |
| | | goQRCodeVisible: false, //二维码弹框 |
| | | sidecolumnval: "", //类别搜索 |
| | |
| | | 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 { |