vue之封装选择下拉树

最新推荐文章于 2024-07-22 11:26:46 发布

原创最新推荐文章于 2024-07-22 11:26:46 发布 · 332 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #elementui

vue 专栏收录该内容

11 篇文章

订阅专栏

这篇博客展示了如何利用ElementUI的el-select和el-tree组件创建一个下拉选择树的功能。通过设置节点点击事件和属性，实现了选中节点后将节点信息转换为选中值，并提供了清空选项的功能。代码示例详细说明了组件的使用方法和数据绑定过程。

最近在做项目的过程中,用到下拉选择树的效果，主要用elementUI的

el-select与el-tree，直接上代码

<template>
    <div class="box">
        <el-select size="small" v-model="value" multiple placeholder="请选择" clearable @clear="selectClear"  collapse-tags>
            <el-option class="option-style" :value="selectTree">
                <el-tree ref="tree" :data="list" :props="defaultProps"
                         node-key="id" show-checkbox @check-change="handleNodeClick">
                    <div slot-scope="{node, data}">
                        <span :class="[{'tree-click': treeClick==data.value}]">{{data.label}}</span>
                    </div>
                </el-tree>
            </el-option>
        </el-select>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        treeClick:null,
        value:[],
        selectTree:[],
      }
    },
    props: {
      list: {
        type: Array,
        default: () => []
      },
      defaultProps: {
        type: Object,
        default: () => {}
      }
    },
    methods: {
      handleNodeClick(data,self,child) {
        console.log(this.$refs.tree.getCheckedNodes())
        let datalist = this.$refs.tree.getCheckedNodes()
        this.selectTree = [] //置空
        this.value = []
        datalist.forEach((item)=>{
          this.selectTree.push({id:item.id,label:item.label})
          this.value.push(item.label)
        })
      },
      selectClear() {
        this.value = [];
        this.selectTree = [];
        this.$refs.tree.setCheckedKeys([]);//清空树选中状态
      },
    },
  }
</script>

<style scoped>
    .box {
        width: 100%;
        height: 100%;
    }

    .option-style {
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
    }
    /deep/ .el-select .el-input--small .el-input__inner{
        height: 28px;
        line-height: 28px;
    }
    /deep/ .el-select .el-input--small .el-input__icon {
        line-height: 28px;
    }
</style>

应用：

 <selectTree :defaultProps="defaultProps" :list="list"></selectTree>

js部分

<script>
    import selectTree from './select-tree'
export default {
  name: 'page1',
  components: {
    selectTree
  },
  data() {
    return {
      defaultProps:{
        children: 'children',
        label: 'label'
      },
      list: [{
        id: 1,
        label: '一级 2',
        children: [{
          id: 3,
          label: '二级 2-1',
          children: [{
            id: 4,
            label: '三级 3-1-1'
          }, {
            id: 5,
            label: '三级 3-1-2',
          }]
        }, {
          id: 2,
          label: '二级 2-2',
          children: [{
            id: 6,
            label: '三级 3-2-1'
          }, {
            id: 7,
            label: '三级 3-2-2',
          }]
        }]
      }],
    }
  },
  methods: {}
}
</script>