vue如何實現(xiàn)級聯(lián)選擇器功能

更新時間：2024年04月24日 17:07:05 作者：清音啊

這篇文章主要介紹了vue如何實現(xiàn)級聯(lián)選擇器功能問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue實現(xiàn)級聯(lián)選擇器功能

vue開發(fā)中，通過使用 Element UI 的 el-cascader 組件來實現(xiàn)級聯(lián)選擇器功能

下面是一個示例代碼：

演示如何使用 el-cascader 組件初始化級聯(lián)選擇器，并設(shè)置默認(rèn)值為單位測試1 和部門 測試11

<template>
  <div>
    <el-cascader
      v-model="selectedValues"
      :options="options"
      :props="props"
      @change="handleChange"
      placeholder="請選擇"
    ></el-cascader>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 初始化級聯(lián)選擇器的選中值
      selectedValues: [],
      // 級聯(lián)選擇器的數(shù)據(jù)源
      options: [
        {
          value: '1',
          label: '測試1',
          children: [
            { value: '2', label: '測試11' },
            { value: '3', label: '測試12' }
          ]
        }
      ],
      // 自定義配置，用于指定數(shù)據(jù)結(jié)構(gòu)中的屬性名
      props: {
        value: 'value',
        label: 'label',
        children: 'children'
      }
    };
  },
  methods: {
    // 監(jiān)聽級聯(lián)選擇器值變化事件
    handleChange(selectedValues) {
      console.log('選中的值：', selectedValues);
    }
  },
  created() {
    // 設(shè)置初始化選中值為單位 '測試1' 和部門 '測試12'
    this.selectedValues = ['1', '3'];
  }
};
</script>

在這個示例中：

options 數(shù)組包含了級聯(lián)選擇器的數(shù)據(jù)源，其中每個對象表示一個選項，包括 value、label 和 children 屬性。

props 對象用于指定數(shù)據(jù)結(jié)構(gòu)中的屬性名，以便 el-cascader 組件正確地解析數(shù)據(jù)。

通過在 selectedValues 中設(shè)置初始選中值為單位 測試1 和部門 測試12，并將其綁定到 el-cascader 組件的 v-model 上，可以在初始化時選中指定的值。

vue級聯(lián)選擇器只傳最后一級

elementUI的級聯(lián)選擇器的v-modle接受的參數(shù)是一個數(shù)組，數(shù)組中的值是對應(yīng)樹形數(shù)組的節(jié)點值，但是在真實開發(fā)中后端可能只給返回了某一處單一節(jié)點，對el-cascader進(jìn)行2次封裝實現(xiàn)三級聯(lián)動

import arrayTreeFilter from 'array-tree-filter'

/*
* 雙層遞歸逆向查找某一節(jié)點的所有父級
* */
const findPatentValue = (array, value, valueName = 'value', childrenName = 'children') => {
  if (!value || !Array.isArray(array)) return []
  const result = []
  let valid = false
  const seek = (array, value) => {
    let parentValue = ''
    const up = (array, value, lastValue) => {
      array.forEach(v => {
        const val = v[valueName]
        const child = v[childrenName]
        if (val === value) {
          valid = true
          parentValue = lastValue
          return
        }
        if (child && child.length) up(child, value, val)
      })
    }
    up(array, value)
    if (parentValue) {
      result.unshift(parentValue)
      seek(array, parentValue)
    }
  }
  seek(array, value)
  return valid ? [...result, value] : []
}

/*
* 該組件主要是通過后端傳入的節(jié)點值來實現(xiàn)級聯(lián)的雙向數(shù)據(jù)綁定
* */
export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default() {
        return []
      }
    },
    config: {
      type: Object,
      default() {
        return {
          value: 'value',
          label: 'label',
          children: 'children'
        }
      }
    }
  },
  data() {
    return {
      result: []
    }
  },
  watch: {
    value() {
      this.setResult()
    },
    options() {
      this.setResult()
    }
  },
  mounted() {
    this.setResult()
  },
  methods: {
    setResult() {
      const {config, options, value} = this
      const {value: valueName, children: childrenName} = config
      this.result = findPatentValue(options, value, valueName, childrenName)
      console.log(this.result)
    },
    /*
    * 當(dāng)級聯(lián)選擇器變化時候會觸發(fā)該事件
    * 向父級傳遞change事件來返回選中的節(jié)點id
    * 向父級傳遞realChange事件來返回選中的節(jié)點及其所有父節(jié)點和選中的所有l(wèi)abel的值
    * arrayTreeFilter 第三方庫用于篩查出選中的節(jié)點及其父節(jié)點
    * */
    areaChange(v = []) {
      this.result = v
      const value = v[v.length - 1] || ''
      this.$emit('change', value)
      const {options, config} = this
      const {value: valueName, label: labelName} = config
      const areas = arrayTreeFilter(options, (item, level) => item[valueName] === v[level])
        .map(o => o[labelName])
      this.$emit('realChange', v, areas)
    },
  },
  render(createElement) {
    const {areaChange, config, result} = this
    const {value, label} = config
    return createElement('el-cascader', {
      props: {
        options: this.options,
        value: result,
        size: 'small',
        clearable: true,
        placeholder: '請選擇',
        props: {
          value,
          label,
          checkStrictly: true
        }
      },
      on: {
        change: areaChange
      }
    })
  }
}

<ChoiceArea v-model="memberForm.regionCode" :options="areaOptions"
                          :config="{value: 'code', label: 'name', children: 'children'}"
                          @realChange="choiceAreaChange"
  
              />