vue+element多選級聯(lián)選擇器自定義props使用詳解

更新時間：2023年07月21日 09:11:52 作者：Wh1T3ZzT

這篇文章主要給大家介紹了關(guān)于vue+element多選級聯(lián)選擇器自定義props使用的相關(guān)資料,級聯(lián)選擇器展示的結(jié)果都是以數(shù)組的形式展示,也就是v-model綁定的結(jié)果,需要的朋友可以參考下

前言

我這里分享的是Cascader 級聯(lián)選擇器中的多選、以及如何自定義props的使用詳解

1.使用Cascader 級聯(lián)選擇器

效果

代碼

<div class="block">
  <span class="demonstration">默認顯示所有Tag</span>
  <el-cascader
    :options="options"
    :props="props"
    clearable></el-cascader>
</div>
<div class="block">
  <span class="demonstration">折疊展示Tag</span>
  <el-cascader
    :options="options"
    :props="props"
    collapse-tags
    clearable></el-cascader>
</div>
<script>
  export default {
    data() {
      return {
        props: { multiple: true },
        options: [{
          value: 1,
          label: '東南',
          children: [{
            value: 2,
            label: '上海',
            children: [
              { value: 3, label: '普陀' },
              { value: 4, label: '黃埔' },
              { value: 5, label: '徐匯' }
            ]
          }, {
            value: 7,
            label: '江蘇',
            children: [
              { value: 8, label: '南京' },
              { value: 9, label: '蘇州' },
              { value: 10, label: '無錫' }
            ]
          }, {
            value: 12,
            label: '浙江',
            children: [
              { value: 13, label: '杭州' },
              { value: 14, label: '寧波' },
              { value: 15, label: '嘉興' }
            ]
          }]
        }, {
          value: 17,
          label: '西北',
          children: [{
            value: 18,
            label: '陜西',
            children: [
              { value: 19, label: '西安' },
              { value: 20, label: '延安' }
            ]
          }, {
            value: 21,
            label: '新疆維吾爾族自治區(qū)',
            children: [
              { value: 22, label: '烏魯木齊' },
              { value: 23, label: '克拉瑪依' }
            ]
          }]
        }]
      };
    }
  };
</script>

這里在優(yōu)化一下，將option放置外部引入，如果是通過后端傳入的數(shù)據(jù)這里也可以直接賦值給option

創(chuàng)建一個regin.js

const arr = [{
  value: 1,
  label: '東南',
  children: [{
    value: 2,
    label: '上海',
    children: [
      { value: 3, label: '普陀' },
      { value: 4, label: '黃埔' },
      { value: 5, label: '徐匯' }
    ]
  }, {
    value: 7,
    label: '江蘇',
    children: [
      { value: 8, label: '南京' },
      { value: 9, label: '蘇州' },
      { value: 10, label: '無錫' }
    ]
  }, {
    value: 12,
    label: '浙江',
    children: [
      { value: 13, label: '杭州' },
      { value: 14, label: '寧波' },
      { value: 15, label: '嘉興' }
    ]
  }]
}, {
  value: 17,
  label: '西北',
  children: [{
    value: 18,
    label: '陜西',
    children: [
      { value: 19, label: '西安' },
      { value: 20, label: '延安' }
    ]
  }, {
    value: 21,
    label: '新疆維吾爾族自治區(qū)',
    children: [
      { value: 22, label: '烏魯木齊' },
      { value: 23, label: '克拉瑪依' }
    ]
  }]
}]
export default arr

頁面中使用

將rogin.js引入，然后在生命周期函數(shù)中賦值給options、這里如果數(shù)據(jù)是要通過后端傳輸?shù)脑捑驮谏芷诤瘮?shù)中去調(diào)用接口的方法、然后在將后端傳入的值賦給options。

<template>
  <div class="OrderDispose">
    <div class="block">
      <span class="demonstration">折疊展示Tag</span>
      <el-cascader
        :options="options"
        :props="props"
        collapse-tags
        clearable></el-cascader>
    </div>
  </div>
</template>
<script>
import rogin from '@/assets/region'
export default {
  data() {
    return {
      props: { multiple: true },
      options: []
    };
  },
  mounted(){
    this.options = rogin
  }
}
</script>
<style>
.demonstration{
  margin-right: 10px;
}
</style>

到這里就完成了級聯(lián)選擇器的初步使用

2.自定義props

先說一下我遇到時的業(yè)務場景：

我需要渲染一個列表，但是這個列表里面的字段并不是value作為值、label為標簽、子集也不是叫children

例如：

[{
  regionValue: 1,
  regionLabel: '東南',
  child: [{
    regionValue: 2,
    regionLabel: '上海',
    child: [
      { regionValue: 3, regionLabel: '普陀' },
      { regionValue: 4, regionLabel: '黃埔' },
      { regionValue: 5, regionLabel: '徐匯' }
    ]
  }, {
    regionValue: 7,
    regionLabel: '江蘇',
    child: [
      { regionValue: 8, regionLabel: '南京' },
      { regionValue: 9, regionLabel: '蘇州' },
      { regionValue: 10, regionLabel: '無錫' }
    ]
  }, {
    regionValue: 12,
    regionLabel: '浙江',
    child: [
      { regionValue: 13, regionLabel: '杭州' },
      { regionValue: 14, regionLabel: '寧波' },
      { regionValue: 15, regionLabel: '嘉興' }
    ]
  }]
}, {
  regionValue: 17,
  regionLabel: '西北',
  child: [{
    regionValue: 18,
    regionLabel: '陜西',
    child: [
      { regionValue: 19, regionLabel: '西安' },
      { regionValue: 20, regionLabel: '延安' }
    ]
  }, {
    regionValue: 21,
    regionLabel: '新疆維吾爾族自治區(qū)',
    child: [
      { regionValue: 22, regionLabel: '烏魯木齊' },
      { regionValue: 23, regionLabel: '克拉瑪依' }
    ]
  }]
}]

例如這種不是組件本身默認值的字段

這個時候就需要使用自定義props

先看官方文檔的說明

這里我們就是要用到value、label、children

先在組件中定義:props="props"

      <el-cascader
        :options="options"
        :props="props"
        collapse-tags
        clearable></el-cascader>

然后修改data里面

data() {
    return {
      props: { multiple: true,label:'regionLabel',value:'regionValue',children:'child' },
      options: []
    };
  },

然后在查看效果

成功！

那么問題又來了，目前是必須要所有字段統(tǒng)一，簡單來說就是無論在哪一級菜單值必須要叫regionValue，或者label必須為標簽，那如果數(shù)據(jù)長成這樣呢

各級菜單的標簽與值的字段都不一樣

例如：

const arr = [{
  Value: 1,
  Label: '東南',
  child: [{
    regionValue: 2,
    regionLabel: '上海',
    child: [
      { regionValue: 3, regionLabel: '普陀' },
      { regionValue: 4, regionLabel: '黃埔' },
      { regionValue: 5, regionLabel: '徐匯' }
    ]
  }, {
    regionValue: 7,
    regionLabel: '江蘇',
    child: [
      { regionValue: 8, regionLabel: '南京' },
      { regionValue: 9, regionLabel: '蘇州' },
      { regionValue: 10, regionLabel: '無錫' }
    ]
  }, {
    regionValue: 12,
    regionLabel: '浙江',
    child: [
      { regionValue: 13, regionLabel: '杭州' },
      { regionValue: 14, regionLabel: '寧波' },
      { regionValue: 15, regionLabel: '嘉興' }
    ]
  }]
}, {
  Value: 17,
  Label: '西北',
  child: [{
    regionValue: 18,
    regionLabel: '陜西',
    child: [
      { regionValue: 19, regionLabel: '西安' },
      { regionValue: 20, regionLabel: '延安' }
    ]
  }, {
    regionValue: 21,
    regionLabel: '新疆維吾爾族自治區(qū)',
    child: [
      { regionValue: 22, regionLabel: '烏魯木齊' },
      { regionValue: 23, regionLabel: '克拉瑪依' }
    ]
  }]
}]

一級菜單與二級菜單的值分別顯示為Value、regionValue,標簽為Label、regionLabel,這種字段不一的情況會導致其中一個顯示有問題。

如果以一級菜單的字段做匹配的話，那么二級菜單就會不顯示，這個時候就需要對數(shù)據(jù)進行二次處理，目的是把所有級的字段統(tǒng)一比如說值就是顯示為value,標簽就是為label。

定義一個方法為disposeData，并且在生命周期函數(shù)中掛載，我用的方法是將一級菜單為匹配字段，將二級的字段全部替換為一級菜單

    disposeData(){
      let children = []
      this.options.forEach((item,index) => {
        item.child.forEach((Item,Index) => {
          children[Index] = {"Value" : Item.regionValue,"Label" : Item.regionLabel}
        })
        this.options[index] = {"Value":item.Value,"Label":item.Label,"child":children}
      })
    }

再看看效果

成功！

完整代碼

<template>
  <div class="OrderDispose">
    <div class="block">
      <span class="demonstration">折疊展示Tag</span>
      <el-cascader
        :options="options"
        :props="props"
        collapse-tags
        clearable></el-cascader>
    </div>
  </div>
</template>
<script>
import rogin from '@/assets/region'
export default {
  data() {
    return {
      props: { multiple: true,label:'Label',value:'Value',children:'child' },
      options: []
    }
  },
  methods:{
    disposeData(){
      let children = []
      this.options.forEach((item,index) => {
        item.child.forEach((Item,Index) => {
          children[Index] = {"Value" : Item.regionValue,"Label" : Item.regionLabel}
        })
        this.options[index] = {"Value":item.Value,"Label":item.Label,"child":children}
      })
    }
  },
  mounted(){
    this.options = rogin
    this.disposeData()
  }
}
</script>