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)
Table of contents 1. Installation of JDK1.8 under...
Install zip decompression function under Linux Th...
Component Basics 1 Component Reuse Components are...
Vue+iview menu and tab linkage I am currently dev...
Preface This article mainly introduces a problem ...
1. Purchase of Server 1. I chose Alibaba Cloud...
1. Pull the image docker pull registry.cn-hangzho...
This article example shares the specific code of ...
A sophomore asked me how to install and configure...
Table of contents Introduction question Design 1:...
Source of the problem As we all know, all network...
DetachKeyPair Unbind SSH key pairs from one or mo...
The props of the component (props is an object) F...
1. First, use springboot to build a simple dubbo ...
1. Why does nginx use gzip? 1. The role of compre...