效果图 并且未开启状态时候的样式调整
html代码
v-loading是加载状态,参考element的组件
这个是根据 status来判断这个条款是否开启,如果没有开启就是画横线的样式
<span :style="data.data.status === '1' ? {color: '#ccc', textDecoration: 'line-through'} : ''">{{ node.label }}<small style="color: #19a9d5; font-size: 12px; font-weight: 300">{{ data.children ? '('+data.children.length+')' : '' }}</small></span>
<div class="col-sm-3 ibox" style="padding: 10px;">
<el-input
placeholder="输入关键字进行过滤"
clearable
v-model="filterText">
</el-input>
<el-tree
v-loading="loading"
class="filter-tree"
:data="personnelList"
:props="defaultProps"
:filter-node-method="filterNode"
node-key="id"
:default-expanded-keys="defaultExpandIds"
@node-click="treeClick"
@node-expand="handleNodeExpand"
@node-collapse="handleNodeCollapse"
highlight-current
style="margin-top: 10px"
ref="tree">
<span class="custom-tree-node" slot-scope="{ node, data }">
<el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
<span :style="data.data.status === '1' ? {color: '#ccc', textDecoration: 'line-through'} : ''">{{ node.label }}<small style="color: #19a9d5; font-size: 12px; font-weight: 300">{{ data.children ? '('+data.children.length+')' : '' }}</small></span>
</el-tooltip>
<span style="width: 50px;">
<el-dropdown @command="(command, e) => handleCommand(command, data, e)" trigger="click">
<el-button
type="text"
style="color: #999"
size="mini"
@click="(e) => treeAppend(e)"
>
+
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="up">增加同级</el-dropdown-item>
<el-dropdown-item command="down">增加下级</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button
type="text"
style="color: #999"
size="mini"
icon="el-icon-edit"
@click="(e) => handleLeftTreeEdit(e, node, data)">
</el-button>
</span>
</span>
</el-tree>
</div>
css部分 可能有的不需要,自我辨别
[v-cloak] {display: none;}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
width: 100%;
}
.custom-tree-node span{
overflow: hidden;
text-overflow: ellipsis;
width: calc(100% - 50px);
}
.el-cascader-menu{
max-width: 500px;
min-width: 250px;
height: auto;
min-height: 300px;
}
.el-scrollbar__wrap {
margin-bottom: 0 !important;
margin-right: 0 !important;
}
.el-scrollbar__wrap::-webkit-scrollbar {
background-color: #fff !important;
}
.el-scrollbar__wrap::-webkit-scrollbar-track {
background-color: #fff !important;
}
data的部分内容
data(){
return {
loading: false,
defaultProps: {
children: 'children',
label: 'name'
},
}
}
js代码贴上有用的部分js 记得阻止事件冒泡,否则一次点击会出现多次的点击事件
//编辑
handleLeftTreeEdit(e, node, data) {
this.leftTreeDialogTitle = "编辑"
e.stopPropagation();//阻止冒泡事件
this.treeEditDialogVisible = true
this.$nextTick(function() {
data.data.statusBoolean = data.data.status === '1' ? false : true
this.leftTreeForm = {...data.data}
})
},
/**
* 阻止冒泡
* @param e
*/
treeAppend(e) {
e.stopPropagation();//阻止冒泡事件
},
/**
* 处理左侧项目树'+'图标下拉菜单
* @param command 传过来的为增加同级 up或者增加下级down 根据后端参数可自定义逻辑
* @param data
* @param e
*/
handleCommand (command, data, e) {
const itemData = {...data.data}
this.leftTreeDialogTitle = "新增"
this.leftTreeForm.sort = itemData.sort // 设置当前排序为新增数据的排序
this.handBookForm.sort = itemData.sort
this.leftTreeForm.position = command
this.currentLeftTreeData = data
this.treeEditDialogVisible = true
},
// 增加子级节点事件
addChildNode() {
//this.nodeonList是点击的节点的数据level 是层级
if (this.nodeonList.level == 5){
this.$message.error('不可增加下级');
}else if (this.nodeonList.data.isContent=='1'){
// 1是最后一层就不可以增加 2不是最后一层
this.$message.error('不可增加下级');
} else {
this.treeFrom.parentId =this.dataList.id//自己的id作为父级id
this.treeFrom.type = this.activeName //tab类型
this.treePointdialogVisible = true //打开弹框
}
},