el-cascader详解

el-cascader 简介

el-cascader 是 Element Plus 框架中的级联选择器组件，用于多级选择场景，如地区选择、分类选择等。

el-cascader 属性详解

1. options:

   • 类型: Array
   • 用途: 级联选择器的数据源。
   • 默认值: []

2. props:

   • 类型: Object
   • 用途: 配置选项，用于指定节点的标签、值、子节点等。
   • 默认值: { label: 'label', value: 'value', children: 'children' }

3. value:

   • 类型: Array
   • 用途: 当前选中的值。
   • 默认值: []

4. v-model:

   • 类型: Array
   • 用途: 双向绑定当前选中的值。
   • 默认值: []

5. placeholder:

   • 类型: String
   • 用途: 输入框占位符。
   • 默认值: 请选择

6. clearable:

   • 类型: Boolean
   • 用途: 是否可清空。
   • 默认值: false

7. disabled:

   • 类型: Boolean
   • 用途: 是否禁用。
   • 默认值: false

8. filterable:

   • 类型: Boolean
   • 用途: 是否可搜索。
   • 默认值: false

9. multiple:

   • 类型: Boolean
   • 用途: 是否多选。
   • 默认值: false

10. collapse-tags:

    • 类型: Boolean
    • 用途: 多选时是否折叠标签。
    • 默认值: false

11. show-all-levels:

    • 类型: Boolean
    • 用途: 是否显示所有级别的标签。
    • 默认值: true

12. separator:

    • 类型: String
    • 用途: 级联选择器每级之间的分隔符。
    • 默认值: /

13. debounce:

    • 类型: Number
    • 用途: 输入框输入的去抖延迟，单位为毫秒。
    • 默认值: 300

14. before-filter:

    • 类型: Function
    • 用途: 搜索过滤之前的回调函数。
    • 默认值: —

15. popper-class:

    • 类型: String
    • 用途: 弹出框的类名。
    • 默认值: —

16. size:

    • 类型: String
    • 用途: 输入框尺寸，可选值为 medium、small、mini。
    • 默认值: —

el-cascader 事件详解

1. change:

   • 类型: Function
   • 用途: 选中值发生变化时触发。
   • 参数: value（当前选中的值），selectedOptions（当前选中的选项）

2. expand-change:

   • 类型: Function
   • 用途: 级联菜单展开或收起时触发。
   • 参数: value（当前选中的值），expandedOptions（当前展开的选项）

3. visible-change:

   • 类型: Function
   • 用途: 弹出框显示或隐藏时触发。
   • 参数: visible（布尔值，表示是否显示）

el-cascader 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义输入框的内容。

2. empty:

   • 插槽名称: empty
   • 用途: 没有匹配数据时的空状态内容。

完整示例代码

<template>
  <div>
    <h2>Cascader 示例</h2>

    <!-- 基本用法 -->
    <el-cascader
      v-model="selectedValue"
      :options="options"
      placeholder="请选择"
    ></el-cascader>

    <!-- 多选 -->
    <el-cascader
      v-model="selectedValues"
      :options="options"
      placeholder="请选择"
      multiple
    ></el-cascader>

    <!-- 可搜索 -->
    <el-cascader
      v-model="searchValue"
      :options="options"
      placeholder="请选择"
      filterable
    ></el-cascader>

    <!-- 自定义标签显示 -->
    <el-cascader
      v-model="customValue"
      :options="options"
      placeholder="请选择"
      :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
    ></el-cascader>

    <!-- 空状态插槽 -->
    <el-cascader
      v-model="emptyValue"
      :options="emptyOptions"
      placeholder="请选择"
    >
      <template #empty>
        <p>暂无数据</p>
      </template>
    </el-cascader>
  </div>
</template>

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

const selectedValue = ref([])
const selectedValues = ref([])
const searchValue = ref([])
const customValue = ref([])
const emptyValue = ref([])

const options = ref([
  {
    value: 'zhinan',
    label: '指南',
    children: [
      {
        value: 'shejiyuanze',
        label: '设计原则',
        children: [
          { value: 'yizhi', label: '一致' },
          { value: 'fankui', label: '反馈' },
          { value: 'xiaolv', label: '效率' },
          { value: 'kekong', label: '可控' }
        ]
      },
      {
        value: 'daohang',
        label: '导航',
        children: [
          { value: 'cexiangdaohang', label: '侧向导航' },
          { value: 'dingbudaohang', label: '顶部导航' }
        ]
      }
    ]
  },
  {
    value: 'zujian',
    label: '组件',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          { value: 'layout', label: 'Layout 布局' },
          { value: 'color', label: 'Color 色彩' },
          { value: 'typography', label: 'Typography 字体' },
          { value: 'icon', label: 'Icon 图标' },
          { value: 'button', label: 'Button 按钮' }
        ]
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          { value: 'radio', label: 'Radio 单选框' },
          { value: 'checkbox', label: 'Checkbox 多选框' },
          { value: 'input', label: 'Input 输入框' },
          { value: 'input-number', label: 'InputNumber 计数器' },
          { value: 'select', label: 'Select 选择器' },
          { value: 'cascader', label: 'Cascader 级联选择器' },
          { value: 'switch', label: 'Switch 开关' },
          { value: 'slider', label: 'Slider 滑块' },
          { value: 'time-picker', label: 'TimePicker 时间选择器' },
          { value: 'date-picker', label: 'DatePicker 日期选择器' },
          { value: 'datetime-picker', label: 'DateTimePicker 日期时间选择器' },
          { value: 'upload', label: 'Upload 上传' },
          { value: 'rate', label: 'Rate 评分' },
          { value: 'form', label: 'Form 表单' }
        ]
      }
    ]
  }
])

const emptyOptions = ref([])
</script>

代码解释

1. 基本用法:

   • 使用 el-cascader 组件并设置 v-model 和 options 属性。

   • <el-cascader
       v-model="selectedValue"
       :options="options"
       placeholder="请选择"
     ></el-cascader>
     

2. 多选:

   • 使用 multiple 属性启用多选。

   • <el-cascader
       v-model="selectedValues"
       :options="options"
       placeholder="请选择"
       multiple
     ></el-cascader>
     

3. 可搜索:

   • 使用 filterable 属性启用搜索功能。

   • <el-cascader
       v-model="searchValue"
       :options="options"
       placeholder="请选择"
       filterable
     ></el-cascader>
     

4. 自定义标签显示:

   • 使用 props 属性自定义节点的标签、值、子节点等。

   • <el-cascader
       v-model="customValue"
       :options="options"
       placeholder="请选择"
       :props="{ expandTrigger: 'hover', value: 'id', label: 'name' }"
     ></el-cascader>
     

5. 空状态插槽:

   • 使用 empty 插槽自定义没有匹配数据时的空状态内容。

   • <el-cascader
       v-model="emptyValue"
       :options="emptyOptions"
       placeholder="请选择"
     >
       <template #empty>
         <p>暂无数据</p>
       </template>
     </el-cascader>