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
<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:
|
>>: Use shell script to install python3.8 environment in CentOS7 (recommended)
When the resolution of the login interface is par...
Customizing images using Dockerfile Image customi...
Preface Every time you use Docker to start a Hado...
It is really not easy to do a good reconstruction...
This article shares the specific code of the WeCh...
Installation of MySQL decompression version and N...
Find the problem I recently encountered a problem...
There are two installation methods for MySQL: msi...
This article shares the specific code of Vue recu...
Using depends_on to sort containers does not perf...
This article shares the specific code for drawing...
background Recently, a leader wanted us to build ...
Table of contents Introduction Child Process Crea...
1. Basic usage examples of float 1. Let's fir...
0x0 Test Environment The headquarters production ...