element下拉树
<el-form-item label="任务:">
<el-popover ref="taskListPopover" placement="bottom-start" trigger="hover">
<el-input placeholder="输入关键字进行过滤" size="small" clearable v-model="taskfilterText"></el-input>
<el-tree
class="task"
style="max-height: 27vh;overflow: auto;margin-top: 10px;"
show-checkbox
:data="taskTreeList"
:props="taskListTreeProps"
:node-key="taskNodeKey"
ref="taskListTree"
:check-strictly="false"
@check-change="taskListTreeCurrentChangeHandle"
:highlight-current="true"
:expand-on-click-node="false"
:default-expand-all="false"
:check-on-click-node="false"
:filter-node-method="taskfilterNode"
></el-tree>
</el-popover>
<el-input v-model="taskListStr" :title="taskListStr" v-popover:taskListPopover :readonly="true" placeholder="请选择">
<i v-show="taskListStr" class="el-input__icon el-icon-circle-close el-input__clear" slot="suffix" @click.stop="clearTaskTreeData"></i>
</el-input>
</el-form-item>
data () {
return {
taskfilterText: ''//树形下拉框====,
taskTreeList: [],
taskListTreeProps: {
label: 'label',
children: 'children',
},
taskNodeKey: 'value',
taskListStr: '',
}
},
watch: {
taskfilterText (val) {
this.$refs.taskListTree.filter(val)
}
},
// 获取下拉列表
getTaskList () {
api.getTaskTree({}).then((data) => {
})
},
//下拉树处理
taskfilterNode (value, data) {
if (!value) return true
return data.label.indexOf(value) !== -1
},
//清空查询条件
clearTaskTreeData () {
this.$refs.taskListTree.setCheckedKeys([])
this.taskListStr = ''
},
// 树选中
taskListTreeCurrentChangeHandle () {
this.taskListStr = this.$refs.taskListTree
.getCheckedNodes()
.map((p) => {
return p.label
})
.join(',')
this.dataForm.subTaskId = this.$refs.taskListTree.getCheckedKeys().join(',')
},
//一级不显示复选框
.task
>>> .el-tree-node
> .el-tree-node__content
> .el-checkbox
.el-checkbox__inner {
display: none;
}
.task
>>> .el-tree-node
.el-tree-node__children
.el-checkbox
.el-checkbox__inner {
display: inline-block !important;
}
作者:whh666
出处:https://www.cnblogs.com/whh666/p/15958677.html
版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构