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 相关文章推荐
js读取注册表的键值示例
Sep 25 Javascript
Egret引擎开发指南之运行项目
Sep 03 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
Feb 25 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
关于JS 预解释的相关理解
Jun 28 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
js弹出窗口简单实现代码
Mar 22 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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中实现中文字符进制转换原理分析
2011/12/06 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
Chrome Web App开发小结
2014/09/04 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
php5.4传引用时报错问题分析
2016/01/22 PHP
微信 getAccessToken方法详解及实例
2016/11/23 PHP
锋利的jQuery 第三章章节总结的例子
2010/03/23 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
js贪吃蛇游戏实现思路和源码
2016/04/14 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
为什么要使用Vuex的介绍
2019/01/19 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
[50:05]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
Python 查找字符在字符串中的位置实例
2018/05/02 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
django admin后管定制-显示字段的实例
2020/03/11 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
python解释器安装教程的方法步骤
2020/07/02 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
捷克街头、运动和滑板一站式商店:BoardStar.cz
2019/10/06 全球购物
春季运动会加油词
2015/07/18 职场文书
高中信息技术教学反思
2016/02/16 职场文书
用Python的绘图库(matplotlib)绘制小波能量谱
2021/04/17 Python