欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)效果的實(shí)例代碼

 更新時(shí)間:2021年11月02日 09:58:33   作者:別團(tuán)等shy哥發(fā)育  
這篇文章主要介紹了vue實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1、實(shí)現(xiàn)效果

在這里插入圖片描述

2、后端返回的數(shù)據(jù)格式

"list": [
      {
        "id": "1178214681118568449",
        "title": "后端開發(fā)",
        "children": [
          {
            "id": "1178214681139539969",
            "title": "Java"
          },
          {
            "id": "1178585108407984130",
            "title": "Python"
          },
          {
            "id": "1454645056483913730",
            "title": "C++"
          },
          {
            "id": "1454645056731377666",
            "title": "C#"
          }
        ]
      },
      {
        "id": "1178214681181483010",
        "title": "前端開發(fā)",
        "children": [
          {
            "id": "1178214681210843137",
            "title": "JavaScript"
          },
          {
            "id": "1178585108454121473",
            "title": "HTML/CSS"
          }
        ]
      },
      {
        "id": "1178214681231814658",
        "title": "云計(jì)算",
        "children": [
          {
            "id": "1178214681252786178",
            "title": "Docker"
          },
          {
            "id": "1178214681294729217",
            "title": "Linux"
          }
        ]
      },
      {
        "id": "1178214681324089345",
        "title": "系統(tǒng)/運(yùn)維",
        "children": [
          {
            "id": "1178214681353449473",
            "title": "Linux"
          },
          {
            "id": "1178214681382809602",
            "title": "Windows"
          }
        ]
      },
      {
        "id": "1178214681399586817",
        "title": "數(shù)據(jù)庫",
        "children": [
          {
            "id": "1178214681428946945",
            "title": "MySQL"
          },
          {
            "id": "1178214681454112770",
            "title": "MongoDB"
          }
        ]
      },
      {
        "id": "1178214681483472898",
        "title": "大數(shù)據(jù)",
        "children": [
          {
            "id": "1178214681504444418",
            "title": "Hadoop"
          },
          {
            "id": "1178214681529610242",
            "title": "Spark"
          }
        ]
      },
      {
        "id": "1178214681554776066",
        "title": "人工智能",
        "children": [
          {
            "id": "1178214681584136193",
            "title": "Python"
          }
        ]
      },
      {
        "id": "1178214681613496321",
        "title": "編程語言",
        "children": [
          {
            "id": "1178214681626079234",
            "title": "Java"
          }
        ]
      }
    ]

數(shù)據(jù)格式不一定和上面的一樣,我上一篇文章是把這個(gè)數(shù)據(jù)格式用在了樹形控件上面,這里放在二級(jí)聯(lián)動(dòng)上面。

3、vue頁面中

 <!-- 所屬分類 TODO -->
      <el-form-item label="課程分類">
        <!--一級(jí)分類-->
        <el-select
          v-model="courseInfo.subjectParentId"
          placeholder="一級(jí)分類" @change="subjectLevelOneChanged">
          <el-option
            v-for="subject in subjectOneList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>

        <!-- 二級(jí)分類 -->
        <el-select v-model="courseInfo.subjectId" placeholder="請(qǐng)選擇">
          <el-option
            v-for="subject in subjectTwoList"
            :key="subject.value"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>
      </el-form-item>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
export default {
  data() {
    return {
      saveBtnDisabled: false, // 保存按鈕是否禁用
      courseInfo:{
        title: '',
        subjectId: '',      //二級(jí)分類id
        subjectParentId:'', //一級(jí)分類id
        teacherId: '',      //講師id
        lessonNum: 0,       //課時(shí)
        description: '',    //課程簡(jiǎn)介
        cover: '/static/01.jpg',          //默認(rèn)封面圖片
        price: 0
      },
      teacherList:[],  //封裝所有的講師數(shù)據(jù)
      subjectOneList:[],  //一級(jí)分類
      subjectTwoList:[] ,  //二級(jí)分類
      BASE_API: process.env.BASE_API // 接口API地址
    }
  },
  created() { //頁面渲染之前執(zhí)行
    //初始化所有講師
    this.getListTeacher()
    //初始化一級(jí)分類
    this.getOneSubject()
  },
  methods: {
    //點(diǎn)擊某個(gè)一級(jí)分類,會(huì)觸發(fā)change事件,顯示對(duì)應(yīng)的二級(jí)分類
    subjectLevelOneChanged(value){
        //value就是一級(jí)分類的id值
        //先遍歷所有的分類 里面包含一級(jí)和二級(jí)
      for (var i = 0; i <this.subjectOneList.length; i++) {
        //每個(gè)一級(jí)分類
        var oneSubject=this.subjectOneList[i]
        //判斷:所有一級(jí)分類id和點(diǎn)擊一級(jí)分類id是否一樣
        if(value===oneSubject.id){  //===即比較值 還要比較類型
          //從一級(jí)分類中獲取所有的二級(jí)分類
          this.subjectTwoList=oneSubject.children
          //把二級(jí)分類Id值清空
          this.courseInfo.subjectId=''
        }
      }
    },
    //查詢所有的一級(jí)分類
    getOneSubject(){
      subject.getSubjectList()
      .then(response=>{
        this.subjectOneList=response.data.list
      })
    }
  }
}
</script>

主要思想就是在第一級(jí)下拉框發(fā)生單擊事件的時(shí)候,我們拿到第一級(jí)下拉框的id值(這里你不一定是id值),然后遍歷包含所有數(shù)據(jù)的一級(jí)分類集合,找到和當(dāng)前單擊事件選中的一級(jí)分類id值相等的那個(gè)對(duì)象,然后把它的children屬性(我的children在后端是個(gè)二級(jí)分類的集合)賦值給data屬性里面的二級(jí)分類數(shù)組對(duì)象subjectTwoList即可。
我這里是后端一次性把所有數(shù)據(jù)都取到了,我在前端遍歷解決的。當(dāng)然,你也可以修改下單擊事件的執(zhí)行邏輯,還有一種方法是每單機(jī)一次,用單擊選中的以及下拉框的鍵去后端查所有的二級(jí)分類,再將查到的二級(jí)分類賦值給第二個(gè)下拉框即可,但這樣效率感覺有點(diǎn)慢,雖然這也是一種實(shí)現(xiàn)方式。

到此這篇關(guān)于vue實(shí)現(xiàn)下拉框二級(jí)聯(lián)動(dòng)效果的文章就介紹到這了,更多相關(guān)vue下拉框二級(jí)聯(lián)動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 詳解從Vue-router到html5的pushState

    詳解從Vue-router到html5的pushState

    這篇文章主要介紹了詳解從Vue-router到html5的pushState,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • vue webpack打包后圖片路徑錯(cuò)誤的完美解決方法

    vue webpack打包后圖片路徑錯(cuò)誤的完美解決方法

    這篇文章主要介紹了vue webpack打包后圖片路徑錯(cuò)誤的解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-12-12
  • Vue3+TS實(shí)現(xiàn)數(shù)字滾動(dòng)效果CountTo組件

    Vue3+TS實(shí)現(xiàn)數(shù)字滾動(dòng)效果CountTo組件

    最近開發(fā)有個(gè)需求需要酷炫的文字滾動(dòng)效果,發(fā)現(xiàn)vue2版本的CountTo組件不適用與Vue3,沒有輪子咋辦,那咱造一個(gè)唄,感興趣的小伙伴可以跟隨小編一起了解一下
    2022-11-11
  • vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例

    vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例

    今天小編就為大家分享一篇關(guān)于vue-router實(shí)現(xiàn)編程式導(dǎo)航的代碼實(shí)例,小編覺得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來看看吧
    2019-01-01
  • Vue.js前端框架之事件處理小結(jié)

    Vue.js前端框架之事件處理小結(jié)

    這篇文章主要介紹了Vue.js前端框架之事件處理小結(jié),本文給大家介紹了v-on 指令的基本用法,通過實(shí)例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-04-04
  • vue項(xiàng)目中錨點(diǎn)定位替代方式

    vue項(xiàng)目中錨點(diǎn)定位替代方式

    今天小編就為大家分享一篇vue項(xiàng)目中錨點(diǎn)定位替代方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue調(diào)試神器vue-devtools安裝方法

    Vue調(diào)試神器vue-devtools安裝方法

    本篇文章主要介紹了Vue調(diào)試神器vue-devtools安裝方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-12-12
  • vue項(xiàng)目實(shí)戰(zhàn)之圓柱狀水波效果實(shí)現(xiàn)

    vue項(xiàng)目實(shí)戰(zhàn)之圓柱狀水波效果實(shí)現(xiàn)

    最近工作中實(shí)現(xiàn)的一個(gè)效果不錯(cuò),分享給大家,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之圓柱狀水波效果實(shí)現(xiàn)的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-12-12
  • vue將單頁面改造成多頁面應(yīng)用的方法

    vue將單頁面改造成多頁面應(yīng)用的方法

    最近領(lǐng)導(dǎo)交我一個(gè)項(xiàng)目是使用 vue-cli 搭建的單頁面應(yīng)用。下面小編通過本文給大家介紹vue將單頁面改造成多頁面應(yīng)用的方法 ,感興趣的朋友一起看看吧
    2018-11-11
  • Vue強(qiáng)制組件重新渲染的方法討論

    Vue強(qiáng)制組件重新渲染的方法討論

    這篇文章給大家詳細(xì)介紹了Vue強(qiáng)制組件重新渲染的正確方法,非常的實(shí)用,有需要的小伙伴可以參考下
    2020-02-02

最新評(píng)論