快捷導航

vue+element樹形選擇器組件封裝和使用方式

更新時間：2020年04月23日 09:59:42 作者：WalkerShen

這篇文章主要介紹了vue+element樹形選擇器組件封裝和使用方式，具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue+element樹形選擇器組件封裝和使用

演示效果

子組件

<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: "請點擊",
    },
    // 樹節(jié)點數(shù)據(jù)
    data: {
      type: Array,
    },
    // 節(jié)點的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;
    },
  },


  // 監(jiān)聽value數(shù)據(jù)，解決組件傳值沒實時更新問題
  watch: {
    value: {
      handler: function (v, ov) {
        this.value = v;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

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

父組件

 <treeSelect
            :value="form.parentName"
            placeholder="點擊獲取父級區(qū)域"
            :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("接收數(shù)據(jù)：", data);
    // 需要使用$set設(shè)置
      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;
      });
    },
}
  }