Element Cascader 级联选择器的使用示例


Posted in Javascript onJuly 27, 2020

组件—级联选择器

基础用法

Element Cascader 级联选择器的使用示例

<div class="block">
 <span class="demonstration">默认 click 触发子菜单</span>
 <el-cascader
  v-model="value"
  :options="options"
  @change="handleChange"></el-cascader>
</div>
<div class="block">
 <span class="demonstration">hover 触发子菜单</span>
 <el-cascader
  v-model="value"
  :options="options"
  :props="{ expandTrigger: 'hover' }"
  @change="handleChange"></el-cascader>
</div>

<script>
 export default {
  data() {
   return {
    value: [],
    options: [{
     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 表单'
      }]
     }, {
      value: 'data',
      label: 'Data',
      children: [{
       value: 'table',
       label: 'Table 表格'
      }, {
       value: 'tag',
       label: 'Tag 标签'
      }, {
       value: 'progress',
       label: 'Progress 进度条'
      }, {
       value: 'tree',
       label: 'Tree 树形控件'
      }, {
       value: 'pagination',
       label: 'Pagination 分页'
      }, {
       value: 'badge',
       label: 'Badge 标记'
      }]
     }, {
      value: 'notice',
      label: 'Notice',
      children: [{
       value: 'alert',
       label: 'Alert 警告'
      }, {
       value: 'loading',
       label: 'Loading 加载'
      }, {
       value: 'message',
       label: 'Message 消息提示'
      }, {
       value: 'message-box',
       label: 'MessageBox 弹框'
      }, {
       value: 'notification',
       label: 'Notification 通知'
      }]
     }, {
      value: 'navigation',
      label: 'Navigation',
      children: [{
       value: 'menu',
       label: 'NavMenu 导航菜单'
      }, {
       value: 'tabs',
       label: 'Tabs 标签页'
      }, {
       value: 'breadcrumb',
       label: 'Breadcrumb 面包屑'
      }, {
       value: 'dropdown',
       label: 'Dropdown 下拉菜单'
      }, {
       value: 'steps',
       label: 'Steps 步骤条'
      }]
     }, {
      value: 'others',
      label: 'Others',
      children: [{
       value: 'dialog',
       label: 'Dialog 对话框'
      }, {
       value: 'tooltip',
       label: 'Tooltip 文字提示'
      }, {
       value: 'popover',
       label: 'Popover 弹出框'
      }, {
       value: 'card',
       label: 'Card 卡片'
      }, {
       value: 'carousel',
       label: 'Carousel 走马灯'
      }, {
       value: 'collapse',
       label: 'Collapse 折叠面板'
      }]
     }]
    }, {
     value: 'ziyuan',
     label: '资源',
     children: [{
      value: 'axure',
      label: 'Axure Components'
     }, {
      value: 'sketch',
      label: 'Sketch Templates'
     }, {
      value: 'jiaohu',
      label: '组件交互文档'
     }]
    }]
   };
  },
  methods: {
   handleChange(value) {
    console.log(value);
   }
  }
 };
</script>

禁用选项

Element Cascader 级联选择器的使用示例

<el-cascader :options="options"></el-cascader>

<script>
 export default {
  data() {
   return {
    options: [{
     value: 'zhinan',
     label: '指南',
     disabled: true,
     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 表单'
      }]
     }, {
      value: 'data',
      label: 'Data',
      children: [{
       value: 'table',
       label: 'Table 表格'
      }, {
       value: 'tag',
       label: 'Tag 标签'
      }, {
       value: 'progress',
       label: 'Progress 进度条'
      }, {
       value: 'tree',
       label: 'Tree 树形控件'
      }, {
       value: 'pagination',
       label: 'Pagination 分页'
      }, {
       value: 'badge',
       label: 'Badge 标记'
      }]
     }, {
      value: 'notice',
      label: 'Notice',
      children: [{
       value: 'alert',
       label: 'Alert 警告'
      }, {
       value: 'loading',
       label: 'Loading 加载'
      }, {
       value: 'message',
       label: 'Message 消息提示'
      }, {
       value: 'message-box',
       label: 'MessageBox 弹框'
      }, {
       value: 'notification',
       label: 'Notification 通知'
      }]
     }, {
      value: 'navigation',
      label: 'Navigation',
      children: [{
       value: 'menu',
       label: 'NavMenu 导航菜单'
      }, {
       value: 'tabs',
       label: 'Tabs 标签页'
      }, {
       value: 'breadcrumb',
       label: 'Breadcrumb 面包屑'
      }, {
       value: 'dropdown',
       label: 'Dropdown 下拉菜单'
      }, {
       value: 'steps',
       label: 'Steps 步骤条'
      }]
     }, {
      value: 'others',
      label: 'Others',
      children: [{
       value: 'dialog',
       label: 'Dialog 对话框'
      }, {
       value: 'tooltip',
       label: 'Tooltip 文字提示'
      }, {
       value: 'popover',
       label: 'Popover 弹出框'
      }, {
       value: 'card',
       label: 'Card 卡片'
      }, {
       value: 'carousel',
       label: 'Carousel 走马灯'
      }, {
       value: 'collapse',
       label: 'Collapse 折叠面板'
      }]
     }]
    }, {
     value: 'ziyuan',
     label: '资源',
     children: [{
      value: 'axure',
      label: 'Axure Components'
     }, {
      value: 'sketch',
      label: 'Sketch Templates'
     }, {
      value: 'jiaohu',
      label: '组件交互文档'
     }]
    }]
   };
  }
 };
</script>

可清空

Element Cascader 级联选择器的使用示例

<el-cascader :options="options" clearable></el-cascader>

<script>
 export default {
  data() {
   return {
    options: [{
     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 表单'
      }]
     }, {
      value: 'data',
      label: 'Data',
      children: [{
       value: 'table',
       label: 'Table 表格'
      }, {
       value: 'tag',
       label: 'Tag 标签'
      }, {
       value: 'progress',
       label: 'Progress 进度条'
      }, {
       value: 'tree',
       label: 'Tree 树形控件'
      }, {
       value: 'pagination',
       label: 'Pagination 分页'
      }, {
       value: 'badge',
       label: 'Badge 标记'
      }]
     }, {
      value: 'notice',
      label: 'Notice',
      children: [{
       value: 'alert',
       label: 'Alert 警告'
      }, {
       value: 'loading',
       label: 'Loading 加载'
      }, {
       value: 'message',
       label: 'Message 消息提示'
      }, {
       value: 'message-box',
       label: 'MessageBox 弹框'
      }, {
       value: 'notification',
       label: 'Notification 通知'
      }]
     }, {
      value: 'navigation',
      label: 'Navigation',
      children: [{
       value: 'menu',
       label: 'NavMenu 导航菜单'
      }, {
       value: 'tabs',
       label: 'Tabs 标签页'
      }, {
       value: 'breadcrumb',
       label: 'Breadcrumb 面包屑'
      }, {
       value: 'dropdown',
       label: 'Dropdown 下拉菜单'
      }, {
       value: 'steps',
       label: 'Steps 步骤条'
      }]
     }, {
      value: 'others',
      label: 'Others',
      children: [{
       value: 'dialog',
       label: 'Dialog 对话框'
      }, {
       value: 'tooltip',
       label: 'Tooltip 文字提示'
      }, {
       value: 'popover',
       label: 'Popover 弹出框'
      }, {
       value: 'card',
       label: 'Card 卡片'
      }, {
       value: 'carousel',
       label: 'Carousel 走马灯'
      }, {
       value: 'collapse',
       label: 'Collapse 折叠面板'
      }]
     }]
    }, {
     value: 'ziyuan',
     label: '资源',
     children: [{
      value: 'axure',
      label: 'Axure Components'
     }, {
      value: 'sketch',
      label: 'Sketch Templates'
     }, {
      value: 'jiaohu',
      label: '组件交互文档'
     }]
    }]
   }
  }
 }
</script>

仅显示最后一级

Element Cascader 级联选择器的使用示例

<el-cascader :options="options" :show-all-levels="false"></el-cascader>

<script>
 export default {
  data() {
   return {
    options: [{
     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 表单'
      }]
     }, {
      value: 'data',
      label: 'Data',
      children: [{
       value: 'table',
       label: 'Table 表格'
      }, {
       value: 'tag',
       label: 'Tag 标签'
      }, {
       value: 'progress',
       label: 'Progress 进度条'
      }, {
       value: 'tree',
       label: 'Tree 树形控件'
      }, {
       value: 'pagination',
       label: 'Pagination 分页'
      }, {
       value: 'badge',
       label: 'Badge 标记'
      }]
     }, {
      value: 'notice',
      label: 'Notice',
      children: [{
       value: 'alert',
       label: 'Alert 警告'
      }, {
       value: 'loading',
       label: 'Loading 加载'
      }, {
       value: 'message',
       label: 'Message 消息提示'
      }, {
       value: 'message-box',
       label: 'MessageBox 弹框'
      }, {
       value: 'notification',
       label: 'Notification 通知'
      }]
     }, {
      value: 'navigation',
      label: 'Navigation',
      children: [{
       value: 'menu',
       label: 'NavMenu 导航菜单'
      }, {
       value: 'tabs',
       label: 'Tabs 标签页'
      }, {
       value: 'breadcrumb',
       label: 'Breadcrumb 面包屑'
      }, {
       value: 'dropdown',
       label: 'Dropdown 下拉菜单'
      }, {
       value: 'steps',
       label: 'Steps 步骤条'
      }]
     }, {
      value: 'others',
      label: 'Others',
      children: [{
       value: 'dialog',
       label: 'Dialog 对话框'
      }, {
       value: 'tooltip',
       label: 'Tooltip 文字提示'
      }, {
       value: 'popover',
       label: 'Popover 弹出框'
      }, {
       value: 'card',
       label: 'Card 卡片'
      }, {
       value: 'carousel',
       label: 'Carousel 走马灯'
      }, {
       value: 'collapse',
       label: 'Collapse 折叠面板'
      }]
     }]
    }, {
     value: 'ziyuan',
     label: '资源',
     children: [{
      value: 'axure',
      label: 'Axure Components'
     }, {
      value: 'sketch',
      label: 'Sketch Templates'
     }, {
      value: 'jiaohu',
      label: '组件交互文档'
     }]
    }]
   };
  }
 };
</script>

多选

Element Cascader 级联选择器的使用示例

<div class="block">
 <span class="demonstration">默认显示所有Tag</span>
 <el-cascader
  :options="options"
  :props="props"
  clearable></el-cascader>
</div>
<div class="block">
 <span class="demonstration">折叠展示Tag</span>
 <el-cascader
  :options="options"
  :props="props"
  collapse-tags
  clearable></el-cascader>
</div>

<script>
 export default {
  data() {
   return {
    props: { multiple: true },
    options: [{
     value: 1,
     label: '东南',
     children: [{
      value: 2,
      label: '上海',
      children: [
       { value: 3, label: '普陀' },
       { value: 4, label: '黄埔' },
       { value: 5, label: '徐汇' }
      ]
     }, {
      value: 7,
      label: '江苏',
      children: [
       { value: 8, label: '南京' },
       { value: 9, label: '苏州' },
       { value: 10, label: '无锡' }
      ]
     }, {
      value: 12,
      label: '浙江',
      children: [
       { value: 13, label: '杭州' },
       { value: 14, label: '宁波' },
       { value: 15, label: '嘉兴' }
      ]
     }]
    }, {
     value: 17,
     label: '西北',
     children: [{
      value: 18,
      label: '陕西',
      children: [
       { value: 19, label: '西安' },
       { value: 20, label: '延安' }
      ]
     }, {
      value: 21,
      label: '新疆维吾尔族自治区',
      children: [
       { value: 22, label: '乌鲁木齐' },
       { value: 23, label: '克拉玛依' }
      ]
     }]
    }]
   };
  }
 };
</script>

选择任意一级选项

Element Cascader 级联选择器的使用示例

<div class="block">
 <span class="demonstration">单选选择任意一级选项</span>
 <el-cascader
  :options="options"
  :props="{ checkStrictly: true }"
  clearable></el-cascader>
</div>
<div class="block">
 <span class="demonstration">多选选择任意一级选项</span>
 <el-cascader
  :options="options"
  :props="{ multiple: true, checkStrictly: true }"
  clearable></el-cascader>
</div>

<script>
 export default {
  data() {
   return {
    options: [{
     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 表单'
      }]
     }, {
      value: 'data',
      label: 'Data',
      children: [{
       value: 'table',
       label: 'Table 表格'
      }, {
       value: 'tag',
       label: 'Tag 标签'
      }, {
       value: 'progress',
       label: 'Progress 进度条'
      }, {
       value: 'tree',
       label: 'Tree 树形控件'
      }, {
       value: 'pagination',
       label: 'Pagination 分页'
      }, {
       value: 'badge',
       label: 'Badge 标记'
      }]
     }, {
      value: 'notice',
      label: 'Notice',
      children: [{
       value: 'alert',
       label: 'Alert 警告'
      }, {
       value: 'loading',
       label: 'Loading 加载'
      }, {
       value: 'message',
       label: 'Message 消息提示'
      }, {
       value: 'message-box',
       label: 'MessageBox 弹框'
      }, {
       value: 'notification',
       label: 'Notification 通知'
      }]
     }, {
      value: 'navigation',
      label: 'Navigation',
      children: [{
       value: 'menu',
       label: 'NavMenu 导航菜单'
      }, {
       value: 'tabs',
       label: 'Tabs 标签页'
      }, {
       value: 'breadcrumb',
       label: 'Breadcrumb 面包屑'
      }, {
       value: 'dropdown',
       label: 'Dropdown 下拉菜单'
      }, {
       value: 'steps',
       label: 'Steps 步骤条'
      }]
     }, {
      value: 'others',
      label: 'Others',
      children: [{
       value: 'dialog',
       label: 'Dialog 对话框'
      }, {
       value: 'tooltip',
       label: 'Tooltip 文字提示'
      }, {
       value: 'popover',
       label: 'Popover 弹出框'
      }, {
       value: 'card',
       label: 'Card 卡片'
      }, {
       value: 'carousel',
       label: 'Carousel 走马灯'
      }, {
       value: 'collapse',
       label: 'Collapse 折叠面板'
      }]
     }]
    }, {
     value: 'ziyuan',
     label: '资源',
     children: [{
      value: 'axure',
      label: 'Axure Components'
     }, {
      value: 'sketch',
      label: 'Sketch Templates'
     }, {
      value: 'jiaohu',
      label: '组件交互文档'
     }]
    }]
   };
  }
 };
</script>

动态加载

Element Cascader 级联选择器的使用示例

<el-cascader :props="props"></el-cascader>

<script>
 let id = 0;

 export default {
  data() {
   return {
    props: {
     lazy: true,
     lazyLoad (node, resolve) {
      const { level } = node;
      setTimeout(() => {
       const nodes = Array.from({ length: level + 1 })
        .map(item => ({
         value: ++id,
         label: `选项${id}`,
         leaf: level >= 2
        }));
       // 通过调用resolve将子节点数据返回,通知组件数据加载完成
       resolve(nodes);
      }, 1000);
     }
    }
   };
  }
 };

可搜索

Element Cascader 级联选择器的使用示例

<div class="block">
 <span class="demonstration">单选可搜索</span>
 <el-cascader
  placeholder="试试搜索:指南"
  :options="options"
  filterable></el-cascader>
</div>
<div class="block">
 <span class="demonstration">多选可搜索</span>
 <el-cascader
  placeholder="试试搜索:指南"
  :options="options"
  :props="{ multiple: true }"
  filterable></el-cascader>
</div>

<script>
 export default {
  data() {
   return {
    options: [{
     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 表单'
      }]
     }, {
      value: 'data',
      label: 'Data',
      children: [{
       value: 'table',
       label: 'Table 表格'
      }, {
       value: 'tag',
       label: 'Tag 标签'
      }, {
       value: 'progress',
       label: 'Progress 进度条'
      }, {
       value: 'tree',
       label: 'Tree 树形控件'
      }, {
       value: 'pagination',
       label: 'Pagination 分页'
      }, {
       value: 'badge',
       label: 'Badge 标记'
      }]
     }, {
      value: 'notice',
      label: 'Notice',
      children: [{
       value: 'alert',
       label: 'Alert 警告'
      }, {
       value: 'loading',
       label: 'Loading 加载'
      }, {
       value: 'message',
       label: 'Message 消息提示'
      }, {
       value: 'message-box',
       label: 'MessageBox 弹框'
      }, {
       value: 'notification',
       label: 'Notification 通知'
      }]
     }, {
      value: 'navigation',
      label: 'Navigation',
      children: [{
       value: 'menu',
       label: 'NavMenu 导航菜单'
      }, {
       value: 'tabs',
       label: 'Tabs 标签页'
      }, {
       value: 'breadcrumb',
       label: 'Breadcrumb 面包屑'
      }, {
       value: 'dropdown',
       label: 'Dropdown 下拉菜单'
      }, {
       value: 'steps',
       label: 'Steps 步骤条'
      }]
     }, {
      value: 'others',
      label: 'Others',
      children: [{
       value: 'dialog',
       label: 'Dialog 对话框'
      }, {
       value: 'tooltip',
       label: 'Tooltip 文字提示'
      }, {
       value: 'popover',
       label: 'Popover 弹出框'
      }, {
       value: 'card',
       label: 'Card 卡片'
      }, {
       value: 'carousel',
       label: 'Carousel 走马灯'
      }, {
       value: 'collapse',
       label: 'Collapse 折叠面板'
      }]
     }]
    }, {
     value: 'ziyuan',
     label: '资源',
     children: [{
      value: 'axure',
      label: 'Axure Components'
     }, {
      value: 'sketch',
      label: 'Sketch Templates'
     }, {
      value: 'jiaohu',
      label: '组件交互文档'
     }]
    }]
   };
  }
 };
</script>

自定义节点内容

Element Cascader 级联选择器的使用示例

<el-cascader :options="options">
 <template slot-scope="{ node, data }">
  <span>{{ data.label }}</span>
  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
 </template>
</el-cascader>

<script>
 export default {
  data() {
   return {
    options: [{
     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 表单'
      }]
     }, {
      value: 'data',
      label: 'Data',
      children: [{
       value: 'table',
       label: 'Table 表格'
      }, {
       value: 'tag',
       label: 'Tag 标签'
      }, {
       value: 'progress',
       label: 'Progress 进度条'
      }, {
       value: 'tree',
       label: 'Tree 树形控件'
      }, {
       value: 'pagination',
       label: 'Pagination 分页'
      }, {
       value: 'badge',
       label: 'Badge 标记'
      }]
     }, {
      value: 'notice',
      label: 'Notice',
      children: [{
       value: 'alert',
       label: 'Alert 警告'
      }, {
       value: 'loading',
       label: 'Loading 加载'
      }, {
       value: 'message',
       label: 'Message 消息提示'
      }, {
       value: 'message-box',
       label: 'MessageBox 弹框'
      }, {
       value: 'notification',
       label: 'Notification 通知'
      }]
     }, {
      value: 'navigation',
      label: 'Navigation',
      children: [{
       value: 'menu',
       label: 'NavMenu 导航菜单'
      }, {
       value: 'tabs',
       label: 'Tabs 标签页'
      }, {
       value: 'breadcrumb',
       label: 'Breadcrumb 面包屑'
      }, {
       value: 'dropdown',
       label: 'Dropdown 下拉菜单'
      }, {
       value: 'steps',
       label: 'Steps 步骤条'
      }]
     }, {
      value: 'others',
      label: 'Others',
      children: [{
       value: 'dialog',
       label: 'Dialog 对话框'
      }, {
       value: 'tooltip',
       label: 'Tooltip 文字提示'
      }, {
       value: 'popover',
       label: 'Popover 弹出框'
      }, {
       value: 'card',
       label: 'Card 卡片'
      }, {
       value: 'carousel',
       label: 'Carousel 走马灯'
      }, {
       value: 'collapse',
       label: 'Collapse 折叠面板'
      }]
     }]
    }, {
     value: 'ziyuan',
     label: '资源',
     children: [{
      value: 'axure',
      label: 'Axure Components'
     }, {
      value: 'sketch',
      label: 'Sketch Templates'
     }, {
      value: 'jiaohu',
      label: '组件交互文档'
     }]
    }]
   }
  }
 }
</script>

级联面板

Element Cascader 级联选择器的使用示例

<el-cascader-panel :options="options"></el-cascader-panel>

<script>
export default {
data() {
 return {
  options: [{
   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 表单'
    }]
   }, {
    value: 'data',
    label: 'Data',
    children: [{
     value: 'table',
     label: 'Table 表格'
    }, {
     value: 'tag',
     label: 'Tag 标签'
    }, {
     value: 'progress',
     label: 'Progress 进度条'
    }, {
     value: 'tree',
     label: 'Tree 树形控件'
    }, {
     value: 'pagination',
     label: 'Pagination 分页'
    }, {
     value: 'badge',
     label: 'Badge 标记'
    }]
   }, {
    value: 'notice',
    label: 'Notice',
    children: [{
     value: 'alert',
     label: 'Alert 警告'
    }, {
     value: 'loading',
     label: 'Loading 加载'
    }, {
     value: 'message',
     label: 'Message 消息提示'
    }, {
     value: 'message-box',
     label: 'MessageBox 弹框'
    }, {
     value: 'notification',
     label: 'Notification 通知'
    }]
   }, {
    value: 'navigation',
    label: 'Navigation',
    children: [{
     value: 'menu',
     label: 'NavMenu 导航菜单'
    }, {
     value: 'tabs',
     label: 'Tabs 标签页'
    }, {
     value: 'breadcrumb',
     label: 'Breadcrumb 面包屑'
    }, {
     value: 'dropdown',
     label: 'Dropdown 下拉菜单'
    }, {
     value: 'steps',
     label: 'Steps 步骤条'
    }]
   }, {
    value: 'others',
    label: 'Others',
    children: [{
     value: 'dialog',
     label: 'Dialog 对话框'
    }, {
     value: 'tooltip',
     label: 'Tooltip 文字提示'
    }, {
     value: 'popover',
     label: 'Popover 弹出框'
    }, {
     value: 'card',
     label: 'Card 卡片'
    }, {
     value: 'carousel',
     label: 'Carousel 走马灯'
    }, {
     value: 'collapse',
     label: 'Collapse 折叠面板'
    }]
   }]
  }, {
   value: 'ziyuan',
   label: '资源',
   children: [{
    value: 'axure',
    label: 'Axure Components'
   }, {
    value: 'sketch',
    label: 'Sketch Templates'
   }, {
    value: 'jiaohu',
    label: '组件交互文档'
   }]
  }]
 };
}
};
</script>

Cascader Attributes

Element Cascader 级联选择器的使用示例

Element Cascader 级联选择器的使用示例

Cascader Events

Element Cascader 级联选择器的使用示例

Cascader Slots

Element Cascader 级联选择器的使用示例

CascaderPanel Attributes

Element Cascader 级联选择器的使用示例

CascaderPanel Events

Element Cascader 级联选择器的使用示例

CascaderPanel Slots

Element Cascader 级联选择器的使用示例

Props

Element Cascader 级联选择器的使用示例

Element Cascader 级联选择器的使用示例

到此这篇关于Element Cascader 级联选择器的使用示例的文章就介绍到这了,更多相关Element Cascader 级联选择器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
有道JavaScript监听浏览器的问题
Jun 23 Javascript
Jquery的each里用return true或false代替break或continue
May 21 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
JS基于递归实现倒计时效果的方法
Nov 26 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 Javascript
vue 通过绑定事件获取当前行的id操作
Jul 27 #Javascript
Element Rate 评分的使用方法
Jul 27 #Javascript
Element InputNumber计数器的使用方法
Jul 27 #Javascript
基于Vue中的父子传值问题解决
Jul 27 #Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 #Javascript
JS图片懒加载技术实现过程解析
Jul 27 #Javascript
Element Notification通知的实现示例
Jul 27 #Javascript
You might like
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
jquery 简短右键菜单 多浏览器兼容
2010/01/01 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
jQuery中slice()方法用法实例
2015/01/07 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
vue组件三大核心概念图文详解
2019/05/30 Javascript
在Vue环境下利用worker运行interval计时器的步骤
2019/08/01 Javascript
javascript for循环性能测试示例
2019/08/07 Javascript
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
对Python 语音识别框架详解
2018/12/24 Python
Django REST framework视图的用法
2019/01/16 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Pytorch 实现自定义参数层的例子
2019/08/17 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
使用pandas实现连续数据的离散化处理方式(分箱操作)
2019/11/22 Python
详解python tkinter 图片插入问题
2020/09/03 Python
python mock测试的示例
2020/10/19 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
瑞典领先的汽车零部件网上零售商:bildelaronline24.se
2017/01/12 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
如何打开WebSphere远程debug
2014/10/10 面试题
大学学年自我鉴定
2013/10/28 职场文书
最受欢迎的自我评价
2013/12/22 职场文书
2014年个人委托书范本
2014/10/13 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
python基于tkinter制作无损音乐下载工具
2021/03/29 Python