ZRAR-UI

级联选择

基础用法

  • 示例：
点击查看代码
<template>
  <z-cascader v-model:value="value" :options="options" placeholder="请选择"/>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'CascaderDemo1',
  setup(){
    const value = ref([])
    const options = ref([
      {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
          {
            value: 'hangzhou',
            label: 'Hangzhou',
            children: [
              {
                value: 'xihu',
                label: 'West Lake'
              }
            ]
          }
        ]
      },
      {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
          {
            value: 'nanjing',
            label: 'Nanjing',
            children: [
              {
                value: 'zhonghuamen',
                label: 'Zhong Hua Men'
              },
              {
                value: 'disabled',
                label: 'disabled',
                disabled: true
              }
            ]
          }
        ]
      }
    ])
    return {
      value,
      options
    }
  }
})
</script>

多选

  • 示例：
点击查看代码
<template>
  <z-cascader v-model:value="value" multiple :options="options" placeholder="请选择"/>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'CascaderDemo2',
  setup(){
    const value = ref([])
    const options = ref([
      {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
          {
            value: 'hangzhou',
            label: 'Hangzhou',
            children: [
              {
                value: 'xihu',
                label: 'West Lake'
              }
            ]
          }
        ]
      },
      {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
          {
            value: 'nanjing',
            label: 'Nanjing',
            children: [
              {
                value: 'zhonghuamen',
                label: 'Zhong Hua Men'
              },
              {
                value: 'disabled',
                label: 'disabled',
                disabled: true
              }
            ]
          }
        ]
      }
    ])
    return {
      value,
      options
    }
  }
})
</script>

可搜索选项并选择

  • 示例：
点击查看代码
<template>
  <z-cascader
    v-model:value="value"
    :filter="{ showSearch }"
    :options="options"
    placeholder="请选择"
  />
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'CascaderDemo3',
  setup(){
    const value = ref([])
    const options = ref([
      {
        value: 'zhejiang',
        label: 'Zhejiang',
        children: [
          {
            value: 'hangzhou',
            label: 'Hangzhou',
            children: [
              {
                value: 'xihu',
                label: 'West Lake'
              }
            ]
          }
        ]
      },
      {
        value: 'jiangsu',
        label: 'Jiangsu',
        children: [
          {
            value: 'nanjing',
            label: 'Nanjing',
            children: [
              {
                value: 'zhonghuamen',
                label: 'Zhong Hua Men'
              },
              {
                value: 'disabled',
                label: 'disabled',
                disabled: true
              }
            ]
          }
        ]
      }
    ])
    const showSearch = (inputValue, path) => {
      return path.some(
        (option) =>
          option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1
      )
    }
    return {
      value,
      options,
      showSearch
    }
  }
})
</script>

Props

参数说明类型默认值
allowClear是否支持清除booleanfalse
autofocus自动获取焦点booleanfalse
bordered是否有边框booleantrue
clearIcon自定义的选择框清空图标slot---
changeOnSelect（单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示booleanfalse
defaultValue默认的选中项string[] | number[][]
disabled禁用booleanfalse
displayRender选择后展示的渲染函数,可使用 #displayRender="{labels, selectedOptions}"({labels, selectedOptions}) => VNodelabels => labels.join(' / ')
dropdownClassName自定义浮层类名string---
dropdownStyle自定义浮层样式CSSProperties{}
expandIcon自定义次级菜单展开图标slot---
expandTrigger次级菜单的展开方式click | hover'click'
fieldNames自定义 options 中 label name children 的字段object{ label: 'label', value: 'value', children: 'children' }
getPopupContainer菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。Function(triggerNode)() => document.body
loadData用于动态加载选项，无法与 showSearch 一起使用(selectedOptions) => void---
maxTagCount最多显示多少个 tag，响应式模式会对性能产生损耗number | responsive---
maxTagPlaceholder隐藏 tag 时显示的内容v-slot | function(omittedValues)---
multiple支持多选节点boolean---
notFoundContent当下拉列表为空时显示的内容string | slot'Not Found'
open控制浮层显隐boolean---
options可选项数据源Option[]---
placeholder输入框占位文本string'请选择'
placement浮层预设位置bottomLeft | bottomRight | topLeft | topRightbottomLeft
removeIcon自定义的多选框清除图标slot---
searchValue设置搜索的值，需要与 showSearch 配合使用string---
showSearch在选择框中显示搜索框boolean | objectfalse
size输入框大小large | default | smalldefault
suffixIcon自定义的选择框后缀图标string | VNode | slot---
tagRender自定义 tag 内容，多选时生效slot---
value(v-model)指定选中项string[] | number[]---

showSearch(showSearch 为对象时，其中的字段:)

参数说明类型默认值
filter接收 inputValue path 两个参数，当 path 符合筛选条件时，应返回 true，反之则返回 false。function(inputValue, path): boolean---
limit搜索结果展示数量number | false50
matchInputWidth搜索结果列表是否与输入框同宽boolean---
render用于渲染 filter 后的选项,可使用 #showSearchRender="{inputValue, path}"function({inputValue, path}): VNode---
sort用于排序 filter 后的选项function(a, b, inputValue)---

Event

事件说明回调参数
change选择完成后的回调(value, selectedOptions) => void
dropdownVisibleChange显示/隐藏浮层的回调(value) => void
search监听搜索，返回输入的值(value) => void

Method

名称描述
blur()移除焦点
focus()获取焦点
Last Updated:
Contributors: jixuanyu