Element-ui中的Cascader級聯(lián)選擇器基礎用法

更新時間：2023年06月26日 09:37:44 作者：菜園前端

這篇文章主要為大家介紹了Element-ui中的Cascader級聯(lián)選擇器基礎用法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

Element-ui 中的 Cascader 級聯(lián)選擇器

當一個數(shù)據(jù)集合有清晰的層級結構時，可通過級聯(lián)選擇器逐級查看并選擇。

按需引入方式

如果是完整引入可跳過此步驟

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>