Element input樹(shù)型下拉框的實(shí)現(xiàn)代碼
更新時(shí)間：2018年12月21日 15:18:29 作者：玲瓏骰子安紅豆
這篇文章主要介紹了Element input樹(shù)型下拉框的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
1.效果圖
1.1 input聚焦時(shí)顯示下拉框，再次點(diǎn)擊下拉框或點(diǎn)擊其他處下拉框消失，主要靠z-index添加遮罩實(shí)現(xiàn)
1.2 實(shí)時(shí)過(guò)濾效果
2.代碼 ( vue.js + element-ui )
2.1 html
<el-form :model="form" size="mini" >
<el-row>
<el-col :span='12'>
<el-form-item label="會(huì)計(jì)主管" >
<el-input
placeholder="請(qǐng)選擇會(huì)計(jì)主管"
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="暫無(wú)數(shù)據(jù)"
: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'//兼容語(yǔ)法 async focus
export default {
data(){
return {
form: {
MANAGER_NAME: '',
MANAGER_ID: '',
},
isShowSelect: false,// 是否顯示會(huì)計(jì)主管的樹(shù)狀選擇器
userlist: [],// 會(huì)計(jì)主管的選項(xiàng)數(shù)據(jù)
defaultProps: { // 會(huì)計(jì)主管 樹(shù)狀選擇器 的選項(xiàng)的配置參數(shù)
children: 'children',
label: 'code_name',
},
}
},
watch: {
form: {//form.MANAGER_NAME變化時(shí)過(guò)濾節(jié)點(diǎn)
handler(form){
if(this.isShowSelect){
this.$refs.selectTree.filter(form.MANAGER_NAME);
}
},
deep: true,//深度監(jiān)聽(tīng)，重要
},
},
methods:{
//下拉框的顯示與隱藏
changeSelectTree(){
this.isShowSelect = !this.isShowSelect;
},
//input獲取焦點(diǎn)事件,初始化樹(shù)
async focus(e) {
let vm = this;
vm.$refs.selectTree.filter("");
vm.$refs.selectTree.setCurrentNode([]);
},
// 選擇器的樹(shù)節(jié)點(diǎn)
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;
},
//選擇會(huì)計(jì)主管
selectManage(data, Node) {
this.form.MANAGER_NAME = data.code_name;//input賦值
this.form.MANAGER_ID = data.chr_id;
this.isShowSelect = false;// 關(guān)閉選擇器
},
//點(diǎn)擊遮罩層，取消選擇會(huì)計(jì)主管
cancelManager(){
this.isShowSelect = false
},
}
}
2.3 css
<style lang="scss">
/*下拉框選擇樹(shù)*/
.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 參考數(shù)據(jù)
//示例下拉框數(shù)據(jù)
this.userList = [{
chr_code: "001001051",
chr_id: "9853",
chr_name: "張海舒",
is_leaf: "1",
user_type: "0",
}]
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
相信開(kāi)發(fā)中或多或少都會(huì)有使用md的時(shí)候。那么一個(gè)簡(jiǎn)易的md編輯器顯得尤為重要，如果想要在自己的項(xiàng)目中添加一個(gè)md編輯器，那么不妨來(lái)看看這篇文章2021-10-10
解決vue 格式化銀行卡(信用卡)每4位一個(gè)符號(hào)隔斷的問(wèn)題
這篇文章主要介紹了vue 格式化銀行卡（信用卡）每4位一個(gè)符號(hào)隔斷的問(wèn)題，本文給大家分享了解決方法,需要的朋友可以參考下2018-09-09
vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法
本篇文章主要介紹了vue修改vue項(xiàng)目運(yùn)行端口號(hào)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序
Vue3 在經(jīng)過(guò)多個(gè)開(kāi)發(fā)版本的迭代后,終于迎來(lái)了它的正式版本,下面這篇文章主要給大家介紹了關(guān)于如何使用vue3實(shí)現(xiàn)一個(gè)人喵交流小程序的相關(guān)資料,需要的朋友可以參考下2021-11-11
JavaScript之Vue.js【入門(mén)基礎(chǔ)】
本文主要介紹一下Vue.js并附上在Node.js環(huán)境下搭建一個(gè)簡(jiǎn)單的Demo實(shí)例代碼。條理清晰，有助于閱讀和理解。有需要的朋友可以看下2016-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全選功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue組件中iview的modal組件爬坑問(wèn)題之modal的顯示與否應(yīng)該是使用v-show
這篇文章主要介紹了vue組件中iview的modal組件爬坑問(wèn)題之modal的顯示與否應(yīng)該是使用v-show,本文通過(guò)實(shí)例圖文相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
本文主要介紹了使用PM2運(yùn)行Vue項(xiàng)目的具體步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
這篇文章主要介紹了Vue??控制元素顯示隱藏的方法和區(qū)別,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vscode自定義vue模板的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01