欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-04-14 15:04:59
本文实例为大家分享了vue自嵌套树组件的使用方法,供大家参考,具体内容如下效果图注意事项 组件自嵌套,定义名称时就定义为组件名 单选和多选用户时,以最*父组件的属性为准,由于组件...

本文实例为大家分享了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>

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