Using vue2.0.js to implement multi-level linkage selectors
Now I will share with you an implementation method of multi-level linkage selector in vue2.0.js, which has a good reference value and I hope it will be helpful to everyone.
Due to work requirements, I want to implement a multi-level linkage selector, but none of the existing linkage selectors on the Internet is what I want. I refer to the Cascader cascade selection in element-ui based on vue2.0 The style of the selector implements the multi-level linkage selector that combines your own requirements. The principle is very simple. I won’t go into details and just go to the code. . .
<template>
<p id="app">
<p class="select">
<p class="input_text"><input type="text" name="" v-on:focus="options1Show" v-model="result"></p>
<p class="options1" v-show="options1isShow">
<ul>
<li v-on:click="toClick(option.value)" v-for="option in options">{{option.label}}</li>
</ul>
</p>
<p class="options2" v-show="options2isShow">
<ul >
<li v-for="item in secondOptions" v-on:click="selectResult(item.label,item.value)">{{item.label}}</li>
</ul>
</p>
</p>
</p>
</template>
<script>
export default {
name: 'app',
data(){
return {
options:[
{
value:'zhinan',
label:'指南',
children:[
{
value: 'yizhi',
label: '一致'
}, {
value: 'fankui',
label: '反馈'
}, {
value: 'xiaolv',
label: '效率'
}, {
value: 'kekong',
label: '可控'
}
]
},
{
value: 'daohang',
label: '导航',
children: [{
value: 'cexiangdaohang',
label: '侧向导航'
},
{
value: 'dingbudaohang',
label: '顶部导航'
}]
}
],
secondOptions:[],
options1isShow:false,
options2isShow:false,
result:''
}
},
methods:{
options1Show:function(){
this.options1isShow=true;
},
toClick:function(item){
this.secondOptions=[];
for(var i=0;i<this.options.length;i++){
if(this.options[i].value==item){
console.log(this.options[i].children);
this.secondOptions=this.options[i].children;
console.log(this.secondOptions);
}
}
this.options2isShow=true;
},
selectResult:function(label){
this.result=label;
this.options1isShow=false;
this.options2isShow=false;
}
}
}
</script>
<style>
li,ul{
list-style: none;
padding:0;
margin:0;
}
li{
height:40px;
line-height: 40px;
border-bottom: 1px solid #ededed;
box-sizing: border-box;
text-align: center;
cursor: pointer;
}
.select{
position: relative;
}
.input_text>input{
width:170px;
height:30px;
border:1px solid #ddd;
}
.options1,.options2{
width:170px;
height:200px;
border:1px solid #ddd;
position: absolute;
background: #fff;
overflow-y: auto;
}
.options2{
left:170px;
}
</style>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Use the select drop-down box to implement binding and value methods in vue.js
How to implement value-passing and URL encoding conversion in JS forms?
The above is the detailed content of Using vue2.0.js to implement multi-level linkage selectors. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use Vue and Element-UI to implement multi-level linkage drop-down box function
Jul 20, 2023 pm 11:43 PM
How to use Vue and Element-UI to implement multi-level drop-down box function Introduction: In web development, multi-level linkage drop-down box is a common interaction method. By selecting an option in a drop-down box, the contents of subsequent drop-down boxes can be dynamically changed. This article will introduce how to use Vue and Element-UI to implement this function, and provide code examples. 1. Preparation First, we need to ensure that Vue and Element-UI have been installed. It can be installed via the following command: npmins
What is the identifier of the id selector in css
Sep 22, 2022 pm 03:57 PM
In CSS, the identifier of the id selector is "#". You can specify a specific style for the HTML element marked with a specific id attribute value. The syntax structure is "#ID value {attribute: attribute value;}". The ID attribute is unique and non-repeatable in the entire page; the ID attribute value should not start with a number. IDs starting with numbers will not work in Mozilla/Firefox browsers.
Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3
Nov 20, 2023 am 11:20 AM
Use the :nth-child(n+3) pseudo-class selector to select the style of child elements whose position is greater than or equal to 3. The specific code example is as follows: HTML code: <divid="container"><divclass="item"> ;First child element</div><divclass="item"&
What to do if the javascript selector fails
Feb 10, 2023 am 10:15 AM
The JavaScript selector fails because the code is not standardized. The solution is: 1. Remove the imported JS code and the ID selector method will be effective; 2. Just introduce the specified JS code before introducing "jquery.js".
css pseudo-selector learning pseudo-class selector analysis
Aug 03, 2022 am 11:26 AM
In the previous article "Css Pseudo-Selector Learning - Pseudo-Element Selector Analysis", we learned about pseudo-element selectors, and today we take a closer look at pseudo-class selectors. I hope it will be helpful to everyone!
Do selectors in css include hypertext tag selectors?
Sep 01, 2022 pm 05:25 PM
Not included. CSS selectors include: 1. Tag selector, which locates specific HTML elements through the element name of the HTML page; 2. Class selector, which locates specific HTML elements through the value of the class attribute of the HTML element; 3. ID selector, which Locate specific HTML elements through the value of the id attribute of the HTML element; 4. The wildcard selector "*" can refer to all types of tag elements, including custom elements; 5. The attribute selector uses the existing attribute name of the HTML element or attribute value to locate a specific HTML element.
In-depth analysis of is and where selectors: improving CSS programming level
Sep 08, 2023 pm 08:22 PM
In-depth analysis of is and where selectors: improving the level of CSS programming Introduction: In the process of CSS programming, selectors are an essential element. They allow us to select and style elements in an HTML document based on specific criteria. In this article, we will take a deep dive into two commonly used selectors namely: is selector and where selector. By understanding their working principles and usage scenarios, we can greatly improve the level of CSS programming. 1. is selector is selector is a very powerful choice
Learn about the selectors supported by lxml in one article
Jan 13, 2024 pm 02:08 PM
lxml is a powerful Python library for processing XML and HTML documents. As a parsing tool, it provides a variety of selectors to help users easily extract the required data from documents. This article will introduce the selectors supported by lxml in detail. lxml supports the following selectors: Tag selector (ElementTagSelector): Select elements by tag name. For example, select elements with a specific tag name by using <tagname>
