Detailed explanation of how to use Vue self-nested tree components

Detailed explanation of how to use Vue self-nested tree components

This article shares with you how to use the Vue self-nested tree component for your reference. The specific content is as follows

Rendering


Precautions

  • Components are nested, and when you define a name, it is defined as the component name
  • When selecting single or multiple users, the properties of the top-level parent component are used. Since the prop cannot be modified synchronously within the component, another value of the same type is registered using data to receive changes within the component, and update is used to synchronously update it to the prop.
  • Expand the component to start loading the user list
<template>
  <ul v-show="isShow" ref="user-tree">
    <li v-for="(item, idx) in userList" :key="idx">
      <div>
        <!-- Multi-select user tree -->
        <input
          class="primary"
          type="checkbox"
          v-model="selectUsers1"
          :value="item.userId"
          v-show="isCheck"
        />
        <!-- Single-select user tree -->
        <span
          @click="onSelect(item)"
          :style="{
            color: selectUser1 == item.userId ? 'red' : '',
            cursor: 'pointer',
          }"
        >
          <i class="iconfont icon-user"></i> {{ item.userName }}</span
        >
        <!-- Expand the user tree -->
        <i
          class="iconfont icon-right"
          v-if="item.haveChild"
          @click="expandItem(idx)"
        ></i>
      </div>
      <!-- Nested user tree -->
      <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", //Defined as component name, otherwise self-nesting will report an error that the component itself is not registered props: {
    isShow: {//Whether to expand the user list type: Boolean,
      default: false
    },
    userId: {//Current user tree parent id
      type: Number,
      default: 0
    },
    selectUser: {//Currently selected user id
      type: Number,
      default: 0
    },
    selectUsers: {//Multiple selection users type: Array,
      default: function () {
        return [];
      }
    },
    isCheck: {//Whether to select multiple options type: Boolean,
      default: false
    }
  },

  data: () => ({
    userList: [], //User list selectUser1: 1, //Single selection of user selectUsers1: [], //Multiple selection of users isLoad: true
  }),
  watch:
    selectUser1 () {//Single-select user, current level synchronized to parent levelif (this.selectUser1 != this.selectUser) {
        this.$emit("update:select-user", this.selectUser1);
      }
    },
    selectUser () {//Single selection of user, current level is synchronized with parent levelif (this.selectUser1 != this.selectUser) {
        this.selectUser1 = this.selectUser;
      }
    },
    selectUsers1 () {//Multiple selections, current level synchronized to parent levelif (this.selectUsers1 != this.selectUsers) {
        this.$emit("update:select-users", this.selectUsers1);

      }
    },
    selectUsers () {//Multiple selections, current level synchronized with parent levelif (this.selectUsers1 != this.selectUsers) {
        this.selectUsers1 = this.selectUsers;
      }
    },
    isShow() {
      if (this.isShow) {
        this.getUserList();
      }
    }
  },
  methods: {
    onSelect (item) {//Single selection user this.$emit("update:select-user", item.userId);

    },

    expandItem (idx) {//Expand the user tree 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, //Whether there is a subtree isShow: false //Whether to display the subtree });
      }
      this.userList = list;


    },

  },
  mounted () {

    if (this.userId == 1) {//The current parent userId is the root user id, so load and expand the user tree this.getUserList(this.userId);
    }
  }
};
</script>

Using the Tree Component

<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>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • Vue uses refs to get the value process in nested components
  • The keep-alive component in Vue implements caching of multi-level nested routes
  • Detailed explanation of communication between hierarchical nested components in Vue front-end development
  • vue keep-alive enables individual components to survive and not be destroyed in multi-component nesting
  • Example of implementing nested subcomponents in Vue components
  • Solve the problem of nested monitoring of browser window changes in multiple components on a single Vue page
  • Use form-create to dynamically generate vue custom components and nested form components
  • Vue parent-child component nested sample code
  • Two ways to implement Vue multi-layer component nesting (test example)
  • Vue nested component parameter passing example sharing

<<:  Detailed explanation of MySQL view management view example [add, delete, modify and query operations]

>>:  Use shell script to install python3.8 environment in CentOS7 (recommended)

Recommend

How to install docker under centos and remotely publish docker in springboot

Table of contents 1. Installation of JDK1.8 under...

Install zip and unzip command functions under Linux and CentOS (server)

Install zip decompression function under Linux Th...

Summary of Vue component basics

Component Basics 1 Component Reuse Components are...

The linkage method between menu and tab of vue+iview

Vue+iview menu and tab linkage I am currently dev...

How to quickly build your own server detailed tutorial (Java environment)

1. Purchase of Server 1. I chose Alibaba Cloud...

Detailed explanation of the process of building an MQTT server using Docker

1. Pull the image docker pull registry.cn-hangzho...

Pure js to achieve typewriter effect

This article example shares the specific code of ...

Summary of pitfalls in importing ova files into vmware

Source of the problem As we all know, all network...

Unbind SSH key pairs from one or more Linux instances

DetachKeyPair Unbind SSH key pairs from one or mo...

How to use and limit props in react

The props of the component (props is an object) F...

How to use docker to deploy dubbo project

1. First, use springboot to build a simple dubbo ...

Nginx improves access speed based on gzip compression

1. Why does nginx use gzip? 1. The role of compre...