关于前端: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