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 相关文章推荐
慎用 somefunction.prototype 分析
Jun 02 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
js 为label标签和div标签赋值的方法
Aug 08 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
Javascript动画效果(4)
Oct 11 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
js实现点击图片在屏幕中间弹出放大效果
Sep 11 Javascript
区分vue-router的hash和history模式
Oct 03 Javascript
利用javaScript处理常用事件详解
Apr 14 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 empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
不使用php api函数实现数组的交换排序示例
2014/04/13 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
javascript新手语法小结
2008/06/15 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
vue使用keep-alive实现数据缓存不刷新
2017/10/21 Javascript
nodejs+mongodb aggregate级联查询操作示例
2018/03/17 NodeJs
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
[02:28]PWL开团时刻DAY3——Ink Ice与DeMonsTer之间的勾心斗角
2020/11/03 DOTA
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Python编程中对文件和存储器的读写示例
2016/01/25 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Django框架反向解析操作详解
2019/11/28 Python
Python模块的制作方法实例分析
2019/12/21 Python
pytorch GAN伪造手写体mnist数据集方式
2020/01/10 Python
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
消防标语大全
2014/06/07 职场文书
工程售后服务方案
2014/06/08 职场文书
高三霸气励志标语
2014/06/24 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
创业计划书之DIY自助厨房
2019/09/06 职场文书
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android