菜园前端

Appearance

Cascader 级联选择器 ​

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

按需引入方式 ​

如果是完整引入可跳过此步骤

javascript
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)
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)

基础用法 ​

vue
<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>
<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 ​

参数说明类型默认值
v-model选中项绑定值array
options可选数据源array
...