10.记录Vue项目iview组件实现树形下拉框


百度查看了其他大神用iview下拉框搭配树形完成,根据其思想本人使用输入框搭配气泡提示框完成效果如上。

点击输入框就会弹出提示框,可以在提示框点击树形控件根据iview树形控件API提供的on-select-change点击方法获取该行

<Poptip v-model="visible" placement="bottom-start">
    <i-input clearable v-model="formItem" placeholder="请输入送检单位"></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'
                     }]
             }]
         }],
// 点击树形获取该行
    handleCheckChange(val) {
         let self = this;
         self.formItem = val[0].title;
         self.visible = false;
     },

在通过属性来控制提示框的显示和隐藏,这样就可以实现点击后获取值,关闭提示框。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。