iview Cascader級聯選擇省市區問題

 

 vue項目中，用到了iview的Cascader級聯選擇省市區，以前用的是iview-area這個插件作的省市區下拉選擇，

沒啥大問題，就是選擇省市區後，屏幕會抖動一下，體驗很差，又找不到解決辦法，

以後從新選擇了iview中的Cascader

<FormItem label="省市區：" prop="chinaArea">
    <Cascader v-model="eroomInfo.chinaArea" :data="chinaArea" @on-change="getArea" style="width: 250px"></Cascader>
</FormItem>

getArea (value, selectedData) {
      const areaName = selectedData.map(item => item.label)
      let chinaArea = [...areaName]
      this.eroomInfo.chinaArea = chinaArea
      if (chinaArea.length === 3) {
        this.eroomInfo.province = chinaArea[0]
        this.eroomInfo.city = chinaArea[1]
        this.eroomInfo.district = chinaArea[2]
      }
 }

選擇省市區後，能拿到相應的參數，傳後臺，建立成功。

 

接下來就是修改列表：

後臺傳過來的是

province, city, district，顯示在修改列表中，就須要轉換成相應的value值，沒找到好的方法，就寫了個3層循環

 

export function getChinaArea (selectedData, province, city, district) {
  let result = []
  selectedData.forEach(item => {
    if (item.label === province) {
      result.push(item.value)
    }
    item.children.forEach(date => {
      if (date.label === city) {
        result.push(date.value)
      }
      date.children.forEach(ele => {
        if (ele.label === district) {
          result.push(ele.value)
        }
      })
    })
  })
  return result
}　　

　

而後引入寫的js文件，傳入參數便可獲得相應的參數，顯示在頁面

 let province = this.eroomInfo.province
 let city = this.eroomInfo.city
 let district = this.eroomInfo.district
 this.eroomInfo.chinaArea = getChinaArea(this.chinaArea, province, city, district)

 

省市區格式：

 

附：還有一種巧辦法，把省市區寫在placeholder裏面，改變一下字體顏色，這樣也能夠實現效果