Vue动态数据实现 el-select 多级联动、数据回显方式
目录
- 动态数据 el-select 多级联动、数据回显
- 多级联动select菜单（易懂）
动态数据 el-select 多级联动、数据回显
父组件
<ProviderCategory v-model="classificationId"></ProviderCategory>
import ProviderCategory from './ProviderCategory'
<script>
import ProviderCategory from './ProviderCategory'
export default {
components: {
ProviderCategory
},
data() {
return {
classificationId:111
}
},
</script>
子组件
<template>
<div>
<el-select class="form-width-160" v-for="(item,idx) in selectedListArr.length" :key="idx"
v-model="selectedValueArr[idx]"
@change="(value)=>changeSelectData(value, idx )"
value-key="id"
>
<el-option v-for="item of selectedListArr[idx]"
:key="`${item.id}${idx}`" :label="item.categoryName"
:value="item"></el-option>
</el-select>
</div>
</template>
<script>
export default {
data () {
return {
classificationList: [],//一级目录的数据，其实就是总的数据
selectedListArr: [],//二维数组，每一级目录的数据存入当前下标
selectedValueArr: [],//一维数组，选中数据组成的数组对象
}
},
props:{
value : ''
},
created () {
console.log(this.value)//父节点传过来的数据
this.getGoodsCategoryList()//初始化数据获取所有的数据
},
methods: {
//this.value如果有数据，调用该方法
findId(arr1,id){//数据回显
var temp = []
var arrId=[];
let newArr=[];
var forFn = function (arr, id) {
for (var i = 0; i < arr.length; i++) {
var item = arr[i]
if (item.id === id) {
newArr.unshift(arr);//二维数组，每一级目录的数据存入当前下标
temp.unshift(item);//一维数组，选中数据组成的数组对象
arrId.unshift(id);//选中数据的id，包括父id
forFn(arr1, item.pId)
break
} else {
if (item.childNodes) {
forFn(item.childNodes, id)
}
}
}
}
forFn(arr1, id)
this.selectedListArr = newArr;
this.selectedValueArr = temp;
console.log(newArr,"测试数据")
console.log(temp,"数据")
console.log(arrId,"id数据")
// return temp
},
//加载数据
initSelectArr(index){
if(index == 0) {//当下标为0时，其实就是新增的数据
this.selectedListArr = [this.classificationList];
this.selectedValueArr=[''];
}else{//否则对数据进行处理，
this.selectedListArr = this.selectedListArr.slice(0, index+1);
this.selectedValueArr = this.selectedValueArr.slice(0, index+1);
}
},
//选中数据后触发的方法
changeSelectData(item, idx) {
console.log(item, idx);
this.initSelectArr(idx);
this.selectedValueArr[idx] = item;
if(item.childNodes && item.childNodes.length>0){
this.selectedListArr.push(item.childNodes);
this.selectedValueArr.push('');
}
},
//初始化数据获取所有的数据
getGoodsCategoryList() {
let childNodes = [];//模拟后端传过来的数据，在下面
this.classificationList = childNodes;
this.initSelectArr(0);//新增数据，页面加载
if(this.value && this.value !== ''){
this.findId(this.classificationList , this.value)
}
// this.$http.get('/test/testData', {
// params: {}
// }).then(res => {
// res = res.data
// if (res.code === 200) {
// this.classificationList = res.data.childNodes
// } else {
// this.$message.error(res.msg)
// }
// }).catch(err => {
// console.log(err)
// })
}
}
}
</script>
<style scoped>
</style>
//测试模拟数据
childNodes = [
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "上衣",
id:2,
pId: 1,
sort: 1,
childNodes: [
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "短袖",
haveGoods: true,
id: 5,
pId: 2,
sort: 1,
childNodes:[
{
id:111,
pId: 5,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "短袖裤子",
childNodes: []
},
{
id:122,
pId: 5,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "短袖鞋子",
childNodes: []
}
],
},
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "西装",
haveGoods: false,
id: 6,
pId: 2,
sort: 1,
childNodes:[
{
id:112,
pId: 6,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "西装裤子",
childNodes: []
},
{
id:121,
pId: 6,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "西装鞋子",
childNodes: []
}
],
}
]
},
{
id:11,
pId: 1,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "裤子",
childNodes: [
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "牛仔",
haveGoods: true,
id: 112222,
pId: 11,
sort: 1,
childNodes:[],
},
]
},
{
id:12,
pId: 1,
sort: 1,
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "鞋子",
childNodes: [
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "耐克",
haveGoods: true,
id: 1121,
pId: 12,
sort: 1,
childNodes:[
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "西牛仔",
haveGoods: true,
id: 11211,
pId: 1121,
sort: 1,
childNodes:[],
},
],
},
{
categoryImg: "https://www.baidu.com/img/bd_logo1.png",
categoryName: "阿迪",
haveGoods: true,
id: 1122,
pId: 12,
sort: 1,
childNodes:[],
},
]
}
];
//数据回显
findId(arr, id) { //将选中的数组和id组成一个数组
for (let i = 0; i < arr.length; i++) {
if (arr[i].id === id) {
return [
[arr, i]
]
break
}
}
let c = []
arr.forEach((item, i) => {
let r = this.findId(item.childNodes || [], id)
if (r && r.length) {
c = [
[arr, i]
].concat(r)
}
})
// console.log(c,"回显数据")
return c
},
多级联动select菜单（易懂）
<div id="checkbox">
<select v-model="selected" @change='func()'>
<option value='' disabled selected style='display:none;'>选择1</option>
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<select name="" id="">
<option value='' disabled selected style='display:none;'>选择2</option>
<option v-for="option in options2" v-bind:value="option.text">
{{ option.text }}
</option>
</select>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#checkbox',
data: {
selected: '',
options: [//一级菜单
{ text: 'A', value: 'A' },
{ text: 'B', value: 'B' },
{ text: 'C', value: 'C' }
],
options2:[],//二级菜单
},
methods:{
func:function(){//绑定事件，给二级菜单赋值
switch(this.selected){
case 'A':this.options2=[{text:'A-1'},{text:'A-2'},{text:'A-3'}];break;
case 'B':this.options2=[{text:'B-1'},{text:'B-2'},{text:'B-3'}];break;
case 'C':this.options2=[{text:'C-1'},{text:'C-2'},{text:'C-3'}];break;
}
}
}
})
</script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue实现三级联动动态菜单
本文实例为大家分享了vue实现三级联动动态菜单的具体代码,供大家参考,具体内容如下 三级联动动态菜单展示:一级菜单选中,生成二级菜单数据,二级菜单选中,生成三级菜单数据(根据上一级菜单的id,作为请求下一级菜单数据接口的参数) 1.代码 <template> <div> <!-- inline:代表的是行内表单,代表一行可以放置多个表单元素 --> <el-form :inline="true" class="de
-
VUE多个下拉框实现双向联动效果
本文实例为大家分享了VUE多个下拉框实现双向联动的具体代码,供大家参考,具体内容如下 一.前言 在开发前端页面的时候,常常需要写下拉框,普通常见的下拉框有在页面写死固定值的下拉框,有通过调用后台接口服务而获取的值列表等.无论是原始的jsp页面html页面等,还是现在流行的vue angluar.js等,逻辑都是一样.本文讲解VUE页面中,多个下拉框如何实现双向联动效果. 二.代码示例 2.1 在vue页面的<el-form 表单里填充两个<el-col :span="12"
-
vue实现联动选择
本文实例为大家分享了vue实现联动选择的具体代码,供大家参考,具体内容如下 因为项目需求,作者和作者头像都是由后台接口传给前端的,所以我就选择用select来实现主要想法就是当选择作者后,自动显示头像,(效果如下) 下面就分享下代码(element):页面用的就是form表单 <el-form ref="goodsCircle" :model="goodsCircle" class="form-container">
-
详解关于element级联选择器数据回显问题
element级联选择器数据回显问题 对于前端小菜鸡来说,被这个问题也是困扰了好久.也是百度的方法. 表单部分代码: <el-form-item label="部门名称:" prop="deptId"> <el-cascader placeholder="请选择部门" :props="depShowType" :options="deptData" filterable change-on
-
vue 动态添加class,三个以上的条件做判断方式
如果 status为1,样式为redRoom 如果 status为2,样式为greenRoom1 如果 status为其他,样式为greenRoom2 :class="{'redRoom': Number(items.status) === 1, 'greenRoom1': Number(items.status) === 2, greenRoom2: Number(items.status) > 2}" 补充知识:vue 根据变量值来判断显示class 我就废话不多说了,大家还
-
java中下拉框select和单选按钮的回显操作
前提: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 1.下拉框select <select name="departmentId" id="departmentId"> <option value="0">请选择部门</option> <c:forEach items=&
-
element-ui select多选绑定回显值问题
目录 element-ui select多选绑定回显值 element-ui下拉多选数据回显时无法进行修改 解决方案 总结 element-ui select多选绑定回显值 这是要最后实现的效果. <el-form-item label="机组名称" prop="unitName"> <el-select v-model="unitName" multiple placeholder="请选择" @chang
-
Vue动态数据实现 el-select 多级联动、数据回显方式
目录 动态数据 el-select 多级联动.数据回显 多级联动select菜单(易懂) 动态数据 el-select 多级联动.数据回显 父组件 <ProviderCategory v-model="classificationId"></ProviderCategory> import ProviderCategory from './ProviderCategory' <script> import ProviderCategory from
-
Vue.js组件tree实现省市多级联动
小颖在上一篇随笔中写了两级的tree,下面给大家再分享一下用<ul><li>标签实现省市多级联动. 调用示例: <template> <div> <treeview :model='treedata'></treeview> </div> </template> <script> import treeview from './TreeView.vue' export default { compo
-
Vant picker 多级联动操作
官网地址:链接 官网文档可能不是很完善,但仔细看文档,方法,类型其实都讲到的. 度娘也没有找到,花了大半天爬坑试错. 搭配弹出层使用 <van-field readonly clickable placeholder="选择城市" :value="station" @click="showPicker = true" /> <van-popup v-model="showPicker" position=&q
-
vue2.0.js的多级联动选择器实现方法
由于工作需求,想实现一个多级联动选择器,但是网上现有的联动选择器都不是我想要的,我参照基于vue2.0的element-ui中的Cascader级联选择器的样式实现了复合自己要求的多级联动选择器,原理很简单,不多说,直接上代码... <template> <div id="app"> <div class="select"> <div class="input_text"><input typ
-
浅谈Vue使用Cascader级联选择器数据回显中的坑
业务场景 由于项目需求,需要对相关类目进行多选,类目数据量又特别大,业务逻辑是使用懒加载方式加载各级类目数据,编辑时回显用户选择的类目. 问题描述 使用Cascader级联选择器过程中主要存在的应用问题如下: 1.由于在未渲染节点数据的情况下编辑时无法找到对应的类目数据导致无法回显,如何自动全部加载已选择类目的相关节点数据: 2.提前加载数据后,点击相应父级节点出现数据重复等: 3.使用多个数据源相同的级联选择器,产生只能成功响应一个加载子级节点数据: 4.Vue中级联选择器相应数据完成加载,依
-
详解Android 多级联动控件实现思路讨论
最近有一个需求是选择多级联动数据,数据级别不固定,可能是五级,可能是两级,具体看用户等级. 所以就需要一个多级联动选择控件 ,在网上一番搜索或找到了这个控件, Android-PickerView 这个控件在三级以内的的联动都没有问题,但是最多只能到三级. 我在原有的基础上做了一些扩展,主要是添加了两个 picker MultiWheelPickerView 可以根据数据动态生成多个滚轮,不再局限于两个三个选项 DynamicWheelPickerView 也是动态生成,但可以一级一级的加载数据
-
Vue下拉框回显并默认选中随机问题
今天做vue的页面下拉框回显问题,回显数据是随机的,好奇怪,虽然多刷新 几下就可以了, 但是这个问题还是存在的,后来发现问题是 回显中的数据是两次请求,因为网络问题两次说不定哪个就请求的快一些, 因为调用的对象不一样,所以可能会不同,改为相同的之后,发现第一次请求的时间始终比第二次时间短一些,达到想要的效果 总结: 1.因为第一次加载下拉框列表的时候,请求列表中所有数据和列表默认回显数据不同,所以会出现被刷新,而出现回显随机问题,,, PS:vue 运用ElementUI,做select下拉框回