在使用 element-ui 的 el-cascader 组件根据后台返回的数据,需要展示一个默认值,官网给出的例子https://element.eleme.cn/2.0/#/zh-CN/component/cascader 借鉴了一下,话不多说直接上代码:

效果图:

代码块:

<template>
    <div class="block">
        <span class="demonstration">默认 click 触发子菜单</span>
        <el-cascader
            :props="defaultParams"
            :options="options"
            v-model="selectedOptions">
        </el-cascader>
    </div>
</template>
<script>
export default {
    data () {
        return {
            options: [],
            selectedOptions: ['1', '4'],
            defaultParams: {
                label: 'name',
                value: 'id',
                children: 'sub'
            },
        }
    },
    create () {
        // 这里是接口返回的数据
        let options = {
            "data": [{
                "id": "1",
                "name": "水果",
                "level": "1",
                "pid": "0",
                "status": "1",
                "sub": [{
                    "id": "4",
                    "name": "苹果",
                    "level": "2",
                    "pid": "1",
                    "status": "1"
                }, {
                    "id": "8",
                    "name": "香蕉",
                    "level": "2",
                    "pid": "1",
                    "status": "1"
                }]
            }, {
                "id": "2",
                "name": "食品",
                "level": "1",
                "pid": "0",
                "status": "1",
                "sub": [{
                    "id": "5",
                    "name": "馒头",
                    "level": "2",
                    "pid": "2",
                    "status": "1"
                }, {
                    "id": "6",
                    "name": "大米",
                    "level": "2",
                    "pid": "2",
                    "status": "1"
                }]
            }]
        }
        this.options = options.data
    }
}
</script>

到这里基本上算是完成了。

注意:如果说后端返回的 id 是 String 类型,这里的默认值也是 String:selectedOptions: ['1', '4'],如果返回的是 Number 类型,默认值 selectedOptions: [1, 4]

 

GitHub 加速计划 / eleme / element
10
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45 8 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 8 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐