element-ui?實現(xiàn)輸入框下拉樹組件功能

更新時間：2024年05月25日 11:04:58 作者：寶子卡粉

這篇文章主要介紹了element-ui?實現(xiàn)輸入框下拉樹組件功能,使用element-ui的?el-input,el-tree,el-popover組件組合封裝,本文結(jié)合示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧

用element-ui的 el-input，el-tree，el-popover組件組合封裝

@import url("http://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css");
<script src="http://unpkg.com/vue@2/dist/vue.js"></script>
<script src="http://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
<div id="app">
  <el-popover
    placement="bottom"
    width="350"
    trigger="click">
    <el-tree
       style="width:300px"
       ref="tree"
       :data="options"
       :check-strictly="false"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[]"
        :default-checked-keys="[]"
        :props="{
           children: 'children',
           label: 'name'
         }"
         @check-change="handleCheckChage"
         @node-click="handleNodeClick"
     >
    </el-tree>
        <el-input slot="reference" 
          style="width:380px"
         v-model="value.name" 
         placeholder="節(jié)點" 
         clearable 
         @clear="handleIptClear">
       </el-input>
  </el-popover>
</div>
var Main = {
    data() {
      return {
        options: [
          {id:'1', name: '1',
           children:[
             {id:'11', name: '11'},
             {id:'12', name: '12'}
           ]
          },
          {id:'2', name: '2'}
        ],
        value:{id:'', name: ''}
      }
    },
    methods: {
      // 清空輸入框內(nèi)容
        handleIptClear(){
            this.$refs.tree.setCheckedNodes([])
            this.value.id = ''
            this.value.name = ''
        },
        // checkbox被選中或取消選中
        handleCheckChage(arg1, arg2, arg3){
            const seltedNodes = this.$refs.tree.getCheckedNodes()
            const ids = seltedNodes.map(n => n.id)
            const names = seltedNodes.map(n => n.name)
            this.value.id = ids
            this.value.name = names
        },
        // 節(jié)點被點擊
        handleNodeClick(arg1, arg2, arg3){
            console.log('nodes:', arg1, arg2, arg3)
        },
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')