1.效果图
1.1 input聚焦时显示下拉框，再次点击下拉框或点击其他处下拉框消失，主要靠z-index添加遮罩实现
1.2 实时过滤效果
2.代码 ( vue.js + element-ui )
2.1 html
<el-form :model="form" size="mini" >
<el-row>
<el-col :span='12'>
<el-form-item label="会计主管" >
<el-input
placeholder="请选择会计主管"
class="width-220 selectTree-input"
v-model="form.MANAGER_NAME"
icon="caret-bottom"
auto-complete="off"
@focus="focus($event)"
@click.native="changeSelectTree()">
</el-input>
<div
v-show="isShowSelect"
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 102;"
@click="cancelManager">
</div>
<el-tree v-show="isShowSelect"
empty-text="暂无数据"
:highlight-current = true
:default-expand-all = false
:expand-on-click-node="false"
:filter-node-method="filterNode"
:data="userlist"
node-key="chr_id"
:props="defaultProps"
@node-click="selectManage"
class="objectTree"
ref="selectTree">
</el-tree>
</el-form-item>
</el-col>
<el-col :span='12'>
</el-col>
</el-row>
</el-form>
2.2 JS
import 'babel-polyfill'//兼容语法 async focus
export default {
data(){
return {
form: {
MANAGER_NAME: '',
MANAGER_ID: '',
},
isShowSelect: false,// 是否显示会计主管的树状选择器
userlist: [],// 会计主管的选项数据
defaultProps: { // 会计主管 树状选择器 的选项的配置参数
children: 'children',
label: 'code_name',
},
}
},
watch: {
form: {//form.MANAGER_NAME变化时过滤节点
handler(form){
if(this.isShowSelect){
this.$refs.selectTree.filter(form.MANAGER_NAME);
}
},
deep: true,//深度监听，重要
},
},
methods:{
//下拉框的显示与隐藏
changeSelectTree(){
this.isShowSelect = !this.isShowSelect;
},
//input获取焦点事件,初始化树
async focus(e) {
let vm = this;
vm.$refs.selectTree.filter("");
vm.$refs.selectTree.setCurrentNode([]);
},
// 选择器的树节点
filterNode(value, data) {
if (!value) return true;
if(!data.code_name){
data.code_name = data.chr_code + " " + data.chr_name
}
return data.code_name.indexOf(value) !== -1;
},
//选择会计主管
selectManage(data, Node) {
this.form.MANAGER_NAME = data.code_name;//input赋值
this.form.MANAGER_ID = data.chr_id;
this.isShowSelect = false;// 关闭选择器
},
//点击遮罩层，取消选择会计主管
cancelManager(){
this.isShowSelect = false
},
}
}
2.3 css
<style lang="scss">
/*下拉框选择树*/
.objectTree {
position: absolute;
overflow: auto;
z-index: 100;
width: 110%;
height: 200px;
border: 1px solid #ddd;
line-height: normal;
z-index: 204;
}
.selectTree-input {
input:focus {
z-index: 204;//103
}
}
.width-220{
width: 220px
}
</style>
2.4 参考数据
//示例下拉框数据
this.userList = [{
chr_code: "001001051",
chr_id: "9853",
chr_name: "张海舒",
is_leaf: "1",
user_type: "0",
}]
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
内蒙古资源网 Copyright www.nmgbbs.com
暂无“Element input树型下拉框的实现代码”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。