关于前端:Elementui-中的-Cascader-级联选择器

Element-ui 中的 Cascader 级联选择器

原文链接：https://note.noxussj.top/?source=sifo

当一个数据汇合有清晰的层级构造时，可通过级联选择器逐级查看并抉择。

按需引入形式

如果是残缺引入可跳过此步骤

import Vue from 'vue'import { Cascader } from 'element-ui'import 'element-ui/lib/theme-chalk/base.css'import 'element-ui/lib/theme-chalk/cascader.css'Vue.use(Cascader)

根底用法

<template>    <el-cascader v-model="value" :options="options"></el-cascader></template><script>export default {    data() {        return {            value: [],            options: [                {                    value: 'zhinan',                    label: '辅助',                    children: [                        {                            value: 'caiwenji',                            label: '蔡文姬'                        },                        {                            value: 'xiaoming',                            label: '小明'                        }                    ]                },                {                    value: 'zujian',                    label: '中单',                    children: [                        {                            value: 'zhenji',                            label: '甄姬'                        },                        {                            value: 'xiaoqiao',                            label: '小乔'                        }                    ]                },                {                    value: 'sheshou',                    label: '射手',                    children: [                        {                            value: 'make',                            label: '马可波罗'                        },                        {                            value: 'sunshangxiang',                            label: '孙尚香'                        }                    ]                }            ]        }    }}</script>

Cascader Attributes

原文链接：https://note.noxussj.top/?source=sifo