百度查看了其他大神用iview下拉框搭配樹形完成,根據(jù)其思想本人使用輸入框搭配氣泡提示框完成效果如上烘绽。
點(diǎn)擊輸入框就會(huì)彈出提示框,可以在提示框點(diǎn)擊樹形控件根據(jù)iview樹形控件API提供的on-select-change點(diǎn)擊方法獲取該行
<Poptip v-model="visible" placement="bottom-start">
<i-input clearable v-model="formItem" placeholder="請(qǐng)輸入送檢單位"></i-input>
<div slot="content">
<Tree :data="ywyList" @on-select-change="handleCheckChange"></Tree>
</div>
</Poptip>
ywyList: [{
title: 'parent 1',
value: '1',
children: [{
title: 'parent 1-1',
value: '11',
children: [{
title: 'leaf 1-1-1',
value: '111'
}, {
title: 'leaf 1-1-2',
value: '112'
}]
}, {
title: 'parent 1-2',
value: '12',
children: [{
title: 'leaf 1-2-1',
value: '121'
}]
}]
}],
// 點(diǎn)擊樹形獲取該行
handleCheckChange(val) {
let self = this;
self.formItem = val[0].title;
self.visible = false;
},
在通過屬性來控制提示框的顯示和隱藏站叼,這樣就可以實(shí)現(xiàn)點(diǎn)擊后獲取值充易,關(guān)閉提示框。