Cascader 级联选择器

avue-cascader：默认路径数组；emitPath: false 时为节点值；multiple: true 时为多个路径或节点值的数组。

通用属性、字典与事件见 基础组件使用约定。模板属性可写为 kebab-case，Form 配置对象使用 camelCase。

基础用法

效果预览可直接操作下方示例

独立组件通过 v-model 绑定单个字段；在 Form 中使用时，将相应配置放入 column。

正在加载示例…

<template>
  <el-row :span="24">
    <el-col :span="6">
      值:{{ form }}<br />
      <avue-cascader v-model="form"
                     :dic="dic"></avue-cascader>
    </el-col>
    <el-col :span="24"></el-col>
    <el-col :span="6">
      返回单节点:{{ form3 }}<br />
      <avue-cascader :emit-path="false"
                     check-strictly
                     v-model="form3"
                     :dic="dic"></avue-cascader>
    </el-col>
    <el-col :span="24"></el-col>
    <el-col :span="6">
      仅显示最后一级值:{{ form }}<br />
      <avue-cascader v-model="form"
                     :show-all-levels="false"
                     :dic="dic"></avue-cascader>
    </el-col>
    <el-col :span="24"></el-col>
    <el-col :span="6">
      多选:{{ form2 }}<br />
      <avue-cascader v-model="form2"
                     multiple
                     :dic="dic"></avue-cascader>
    </el-col>
    <el-col :span="24"></el-col>
    <el-col :span="6">
      选择任意一级选项:{{ form }}<br />
      <avue-cascader v-model="form"
                     check-strictly
                     :dic="dic"></avue-cascader>
    </el-col>
    <el-col :span="24"></el-col>
    <el-col :span="6">
      懒加载值:{{ form1 }}<br />
      <avue-cascader lazy
                     :lazy-load="lazyLoad"
                     :props="props"
                     v-model="form1"></avue-cascader>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const form = ref(["zhinan", "shejiyuanze", "yizhi"])
const form1 = ref(["110000", "110100", "110101"])
const form2 = ref([["zhinan", "shejiyuanze", "yizhi"]])
const form3 = ref('zhinan')
const props = {
  label: 'name',
  value: 'code'
}
const dic = [{
  value: 'zhinan',
  label: '指南',
  children: [{
    value: 'shejiyuanze',
    label: '设计原则',
    children: [{
      value: 'yizhi',
      label: '一致'
    }, {
      value: 'fankui',
      label: '反馈'
    }]
  }]
}]

const lazyLoad = (node, resolve) => {
  let baseUrl = 'https://api.avuejs.com/area'
  let stop_level = 2
  let level = node.level
  let data = node.data || {}
  let code = data.code
  let list = []
  let callback = () => {
    resolve((list || []).map(ele => {
      return Object.assign(ele, {
        leaf: level >= stop_level
      })
    }))
  }
  if (level === 0) {
    axios.get(`${baseUrl}/getProvince`).then(res => {
      list = res.data.data
      callback()
    })
  } else if (level === 1) {
    axios.get(`${baseUrl}/getCity/${code}`).then(res => {
      list = res.data.data
      callback()
    })
  } else if (level === 2) {
    axios.get(`${baseUrl}/getArea/${code}`).then(res => {
      list = res.data.data
      callback()
    })
  } else {
    callback()
  }
}
</script>

属性

属性	类型	默认值	说明
dic / props	array / object	[] / 默认映射	树形字典与键映射
emitPath	boolean	true	保存完整路径
multiple	boolean	false	多选
showAllLevels	boolean	true	显示全部层级，不改变绑定值
checkStrictly	boolean	false	允许独立选择父节点
expandTrigger	string	hover	hover / click
filterable	boolean	false	搜索已加载节点
lazy / lazyLoad	boolean / function	false / —	lazyLoad(node, resolve) 需调用 resolve(list)
tags / collapseTags / collapseTagsTooltip	boolean	false	折叠多选标签及提示
maxCollapseTags	number	—	标签最大显示数
effect	string	light	light / dark
virtualScroll / fitInputWidth	boolean	undefined	虚拟滚动与弹层宽度，需底层版本支持
height / itemSize	number	—	面板与虚拟项高度

默认插槽为 { data, node }；实例 getCheckedNodes(leafOnly = false) 获取已选节点。参见 Cascader 表单。