Vue动态数据实现 el-select 多级联动、数据回显方式
更新时间：2022年07月26日 09:03:37 作者：Mr_Debugger
这篇文章主要介绍了Vue动态数据实现 el-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如何在项目中调用腾讯云的滑动验证码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
本文主要介绍了nuxt3中server routes的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要为大家介绍了preload对比prefetch的使用区别详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
这篇文章主要介绍了Vue.js实现一个todo-list的上移下移删除功能,需要的朋友可以参考下2017-06-06
Vue中调用组件使用kebab-case短横线命名法和使用大驼峰的区别详解
这篇文章主要介绍了Vue中调用组件使用kebab-case（短横线）命名法和使用大驼峰的区别,通过实例可以看出如果是在html中使用组件，那么就不能用大驼峰式写法，如果是在.vue 文件中就可以，需要的朋友可以参考下2023-10-10
这篇文章主要为大家详细介绍了如何使用vue实现带缩略图的轮播图效果,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的可以参考下2024-02-02
这篇文章主要为大家详细介绍了vue.js中指令Directives，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了vue中的搜索关键字实例讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue自定义表单生成器,可根据json参数动态生成表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-07-07
在 Vue Router 中,你可以使用滚动行为来定义路由切换时页面滚动的行为,本文就详细的介绍一下Vue-Router滚动行为的具体使用,感兴趣的可以了解一下2023-08-08
最新评论