快捷導(dǎo)航

Vue動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)?el-select?多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯方式

更新時(shí)間：2022年07月26日 09:03:37 作者：Mr_Debugger

這篇文章主要介紹了Vue動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)?el-select?多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

動(dòng)態(tài)數(shù)據(jù) el-select 多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯

父組件

<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: [],//一級(jí)目錄的數(shù)據(jù)，其實(shí)就是總的數(shù)據(jù)
? ? ? ? ? ? ? ? selectedListArr: [],//二維數(shù)組，每一級(jí)目錄的數(shù)據(jù)存入當(dāng)前下標(biāo)
? ? ? ? ? ? ? ? selectedValueArr: [],//一維數(shù)組，選中數(shù)據(jù)組成的數(shù)組對(duì)象
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? props:{
? ? ? ? ? ? value : ''
? ? ? ? },
? ? ? ? created () {
? ? ? ? ? ? console.log(this.value)//父節(jié)點(diǎn)傳過來的數(shù)據(jù)
? ? ? ? ? ? this.getGoodsCategoryList()//初始化數(shù)據(jù)獲取所有的數(shù)據(jù)
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? //this.value如果有數(shù)據(jù)，調(diào)用該方法
? ? ? ? ? ? findId(arr1,id){//數(shù)據(jù)回顯
? ? ? ? ? ? ? ? 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);//二維數(shù)組，每一級(jí)目錄的數(shù)據(jù)存入當(dāng)前下標(biāo)
? ? ? ? ? ? ? ? ? ? ? ? ? ? temp.unshift(item);//一維數(shù)組，選中數(shù)據(jù)組成的數(shù)組對(duì)象
? ? ? ? ? ? ? ? ? ? ? ? ? ? arrId.unshift(id);//選中數(shù)據(jù)的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,"測(cè)試數(shù)據(jù)")
? ? ? ? ? ? ? ? console.log(temp,"數(shù)據(jù)")
? ? ? ? ? ? ? ? console.log(arrId,"id數(shù)據(jù)")
? ? ? ? ? ? ? ? // return temp
? ? ? ? ? ? },
? ? ? ? ? ? //加載數(shù)據(jù)
? ? ? ? ? ? initSelectArr(index){
? ? ? ? ? ? ? ? if(index == 0) {//當(dāng)下標(biāo)為0時(shí)，其實(shí)就是新增的數(shù)據(jù)
? ? ? ? ? ? ? ? ? ? this.selectedListArr = [this.classificationList];
? ? ? ? ? ? ? ? ? ? this.selectedValueArr=[''];
? ? ? ? ? ? ? ? }else{//否則對(duì)數(shù)據(jù)進(jìn)行處理，
? ? ? ? ? ? ? ? ? ? this.selectedListArr = this.selectedListArr.slice(0, index+1);
? ? ? ? ? ? ? ? ? ? this.selectedValueArr = this.selectedValueArr.slice(0, index+1);
? ? ? ? ? ? ? ? }
?
? ? ? ? ? ? },
? ? ? ? ? ? //選中數(shù)據(jù)后觸發(fā)的方法
? ? ? ? ? ? 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('');
? ? ? ? ? ? ? ? }
? ? ? ? ? ? },
? ? ? ? ? ? //初始化數(shù)據(jù)獲取所有的數(shù)據(jù)
? ? ? ? ? ? getGoodsCategoryList() {
? ? ? ? ? ? ? ? let childNodes = [];//模擬后端傳過來的數(shù)據(jù)，在下面
? ? ? ? ? ? ? ? this.classificationList = childNodes;
? ? ? ? ? ? ? ? this.initSelectArr(0);//新增數(shù)據(jù)，頁面加載
? ? ? ? ? ? ? ? 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>

//測(cè)試模擬數(shù)據(jù)
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:[],
                            },
                        ]
                    }
                ];

        //數(shù)據(jù)回顯
        findId(arr, id) { //將選中的數(shù)組和id組成一個(gè)數(shù)組
 
            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,"回顯數(shù)據(jù)")
            return c
        },

多級(jí)聯(lián)動(dòng)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: [//一級(jí)菜單
      { text: 'A', value: 'A' },
      { text: 'B', value: 'B' },
      { text: 'C', value: 'C' }
    ],
    options2:[],//二級(jí)菜單
  },
  methods:{
    func:function(){//綁定事件，給二級(jí)菜單賦值
      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>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: