vue+element树形选择器组件封装和使用

最新推荐文章于 2025-06-19 09:14:12 发布

原创最新推荐文章于 2025-06-19 09:14:12 发布 · 632 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

vue 专栏收录该内容

4 篇文章

订阅专栏

文章展示了如何在Vue.js中创建一个自定义组件`treeSelect`，该组件结合了输入框和树形结构，用于选择父级区域。当输入框获得焦点时，显示树结构，点击节点后将节点信息传递给父组件。组件通过`v-model`双向绑定值，使用`props`传递数据和配置，通过`handleData`方法处理节点点击事件，确保组件间的值实时更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示效果

子组件

<template>
  <div>
    <el-input
      v-model="value"
      @focus="showTree"
      :placeholder="placeholder"
      suffix-icon="el-icon-arrow-down"
      readonly
    />
    <el-tree
      v-if="treeShow"
      :data="data"
      :node-key="nodeKey"
      default-expand-all
      :props="defaultProps"
      accordion
      @node-click="handleNodeClick"
    >
    </el-tree>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeShow: false,
    };
  },
  props: {
    // input的值
    value: {
      type: String,
    },
    // 提示语
    placeholder: {
      type: String,
      default: "请点击",
    },
    // 树节点数据
    data: {
      type: Array,
    },
    // 节点的key
    nodeKey: {
      type: String,
      default: "id",
    },
    // 树的props
    defaultProps: {
      type: Object,
      default: {
        children: "children",
        label: "name",
      },
    },
    // 方法
    handleData: {
      type: Function,
    },
  },
  methods: {

    // 点击方法
    handleNodeClick(data) {
      this.treeShow = false;
      this.handleData(data);
    },

    // 显示树
    showTree() {
      this.treeShow = !this.treeShow;
    },
  },


  // 监听value数据，解决组件传值没实时更新问题
  watch: {
    value: {
      handler: function (v, ov) {
        this.value = v;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped></style>

父组件

 <treeSelect
            :value="form.parentName"
            placeholder="点击获取父级区域"
            :data="treeList"
            :defaultProps="defaultProps"
            :handleData="receiveData"
          ></treeSelect>

export default{
//组件引入                          
  components: {
    treeSelect: () => import("../components/treeSelect.vue"),
  },
 //
data(){
    return {
      form: {},
       treeShow: false,
      treeList: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    }
},
methods:{
  receiveData(data) {
      console.log("接收数据：", data);
    // 需要使用$set设置
      this.$set(this.form, "parentName", data.name);
      this.$set(this.form, "parentId", data.id);
    },

// 获取树的接口
  treeRegion() {
      let params = {};
      treeRegion(params).then((res) => {
        this.treeList = res.data;
      });
    },
}
  }