Vue自嵌套树组件使用方法详解

本文实例为大家分享了vue自嵌套树组件的使用方法，供大家参考，具体内容如下

效果图

注意事项

• 组件自嵌套，定义名称时就定义为组件名
  
• 单选和多选用户时，以最*父组件的属性为准，由于组件内不能同步修改prop，故采用data注册另一个同类型数值用于接收组件内改变，并使用update，同步更新到prop上
  
• 展开组件才开始加载用户列表

<template>
  <ul v-show="isshow" ref="user-tree">
    <li v-for="(item, idx) in userlist" :key="idx">
      <div>
        <!-- 多选用户树 -->
        <input
          class="primary"
          type="checkbox"
          v-model="selectusers1"
          :value="item.userid"
          v-show="ischeck"
        />
        <!-- 单选用户树 -->
        <span
          @click="onselect(item)"
          :style="{
            color: selectuser1 == item.userid ? 'red' : '',
            cursor: 'pointer',
          }"
        >
          <i class="iconfont icon-user"></i> {{ item.username }}</span
        >
        <!-- 展开用户树 -->
        <i
          class="iconfont icon-right"
          v-if="item.havechild"
          @click="expanditem(idx)"
        ></i>
      </div>
      <!-- 嵌套用户树 -->
      <user-tree
        :user-id="item.userid"
        v-if="item.havechild"
        :is-show.sync="item.isshow"
        :select-user.sync="selectuser1"
        :select-users.sync="selectusers1"
        :is-check="ischeck"
      ></user-tree>
    </li>
  </ul>
</template>

<script> 
export default {
  name: "user-tree",//定义为组件名，否则自嵌套时报未注册自身组件错误
  props: {
    isshow: {//是否展开用户列表
      type: boolean,
      default: false
    },
    userid: {//当前用户树父级id
      type: number,
      default: 0
    },
    selectuser: {//当前选中的用户id
      type: number,
      default: 0
    },
    selectusers: {//多选用户
      type: array,
      default: function () {
        return [];
      }
    },
    ischeck: {//是否多选功能
      type: boolean,
      default: false
    }
  },

  data: () => ({
    userlist: [], //用户列表
    selectuser1: 1,//单选用户
    selectusers1: [],//多选用户
    isload: true
  }),
  watch: {
    selectuser1 () {//单选用户，当前级同步到父级
      if (this.selectuser1 != this.selectuser) {
        this.$emit("update:select-user", this.selectuser1);
      }
    },
    selectuser () {//单选用户，当前级同步于父级
      if (this.selectuser1 != this.selectuser) {
        this.selectuser1 = this.selectuser;
      }
    },
    selectusers1 () {//多选用户，当前级同步到父级
      if (this.selectusers1 != this.selectusers) {
        this.$emit("update:select-users", this.selectusers1);

      }
    },
    selectusers () {//多选用户，当前级同步于父级
      if (this.selectusers1 != this.selectusers) {
        this.selectusers1 = this.selectusers;
      }
    },
    isshow () {
      if (this.isshow) {
        this.getuserlist();
      }
    }
  },
  methods: {
    onselect (item) {//单选用户
      this.$emit("update:select-user", item.userid);

    },

    expanditem (idx) {//展开用户树
      if (this.userlist[idx].isshow) {
        this.userlist[idx].isshow = false;
      } else {
        this.userlist[idx].isshow = true;
      }

    },
    getuserlist () {
      var list = [];
      for (var i = 0; i < 10; i++) {
        var userid = math.round(math.random() * 10000);
        list.push({
          userid: userid,
          username: "user-" + userid,
          havechild: i % 2,//是否有子树
          isshow: false //是否展示子树
        });
      }
      this.userlist = list;


    },

  },
  mounted () {

    if (this.userid == 1) {//当前父级userid为根用户id，就加载并展开用户树
      this.getuserlist(this.userid);
    }
  }
};
</script> 

使用树组件

<div>{{ selectuser }}</div>
    <div>
      <span v-for="item in selectusers" :key="item">【{{ item }}】</span>
    </div>
    <user-tree
      :user-id="1"
      :is-show="true"
      :select-user.sync="selectuser"
      :select-users.sync="selectusers"
      :is-check="true"
></user-tree>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。