elementUI---封装树形下拉框

Posted 2022-07-08 晚星@

封装的组件

<template>
  <el-select ref="select" :value="value" placeholder="请选择" size="mini" @visible-change="visibleChange" clearable style="width: 100%;" @clear="clear">
    <el-option ref="option" class="option" :value="optionData.id" :label="optionData.name">
      <el-tree ref="tree" class="tree" :node-key="nodeKey" :data="data" :props="props" :default-expanded-keys='[value]' highlight-current :expand-on-click-node="false" @node-click="handleNodeClick"></el-tree>
    </el-option>
  </el-select>

</template>

<script>
export default 
  name: 'TreeSelect',
  props: 
    // v-model绑定
    value: 
      type: [String, Number],
      default: ''
    ,
    // 树形的数据
    data: 
      type: Array,
      default: function() 
        return []
      
    ,
    // 每个树节点用来作为唯一标识的属性
    nodeKey: 
      type: [String, Number],
      default: 'id'
    ,
    // tree的props配置
    props: 
      type: Object,
      default: function() 
        return 
          label: 'label',
          children: 'children'
        
      
    
  ,
  data() 
    return 
      optionData: 
        id: '',
        name: ''
      
    
  ,
  watch: 
    value: 
      handler(val) 
        if (!this.isEmpty(this.data)) 
          this.init(val)
        
      ,
      immediate: true
    ,
    data: function(val) 
      if (!this.isEmpty(val)) 
        this.init(this.value)
      
    
  ,
  methods: 
    // 是否为空
    isEmpty(val) 
      for (let key in val) 
        return false
      
      return true
    ,
    handleNodeClick(data) 
      this.$emit('input', data[this.nodeKey])
      this.$refs.select.visible = false
    ,
    init(val) 
      if (val) 
        this.$nextTick(() => 
          this.$refs.tree.setCurrentKey(val)
          let node = this.$refs.tree.getNode(val)
          this.optionData.id = val
          this.optionData.name = node.label
        )
       else 
        this.$refs.tree.setCurrentKey(null)
      
    ,
    visibleChange(e) 
      if (e) 
        let selectDom = this.$refs.tree.$el.querySelector('.is-current')
        setTimeout(() => 
          this.$refs.select.scrollToOption( $el: selectDom )
        , 0)
      
    ,
    clear() 
      this.$emit('input', '')
    
  

</script>

<style scoped>
.option 
  height: auto;
  line-height: 1;
  padding: 0;
  background-color: #fff;


.tree 
  padding: 4px 20px;
  font-weight: 400;

</style>

使用组件

<template>
  <div>
    <TreeSelect v-model="value" :data="list" style="width: 240px;"></TreeSelect>
  </div>
</template>

<script>
import TreeSelect from './treeSelect.vue'
export default 
  components:  TreeSelect ,
  name: "helloWord",
  data() 
    return 
      list: [
        label: '系统',
        id: 1,
        children: [
           label: '用户', id: 2 ,
           label: '用户组', id: 3 ,
           label: '角色', id: 4 ,
           label: '菜单', id: 5 ,
           label: '组织架构', id: 6 
        ]
      ,
      
        label: '商品',
        id: 7,
        children: [
           label: '列表', id: 8 ,
           label: '添加', id: 9 ,
           label: '修改', id: 10 ,
           label: '删除', id: 11 ,
           label: '商品分类', id: 12 ,
           label: '分类修改', id: 13 
        ]
      ],
      value: 1
    
  ,

</script>

<style>
</style>