ElementUI 之 Cascader 级联选择器自定义节点内容

最新推荐文章于 2024-08-20 17:13:41 发布

前端杨小白

最新推荐文章于 2024-08-20 17:13:41 发布

阅读量8.9k

点赞数

分类专栏： ElementUI

本文链接：https://blog.csdn.net/yangwqi/article/details/104773192

版权

ElementUI 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

Cascader 级联选择器：自定义备选项的节点内容，参数为 { node, data }，分别为当前节点的 Node 对象和数据

modeType:[{
        "children": [{
            "children": [{
                "children": [],
                "label": {
                    "id": 237,
                    "modelStorageId": 142,
                    "name": "导弹发射车",
                    "number": 4
                }
            }, {
                "children": [],
                "label": {
                    "id": 239,
                    "modelStorageId": 144,
                    "name": "进攻弹",
                    "number": 4
                }
            }, {
                "children": [],
                "label": {
                    "id": 240,
                    "modelStorageId": 145,
                    "name": "基地",
                    "number": 4
                }
            }, {
                "children": [],
                "label": {
                    "id": 241,
                    "modelStorageId": 146,
                    "name": "指挥所",
                    "number": 4
                }
            }],
            "label": {
                "id": 4,
                "modelStorageId": null,
                "name": "地面武器",
                "number": 1
            }
        }, {
            "children": [],
            "label": {
                "id": 8,
                "modelStorageId": null,
                "name": "地面兵种",
                "number": 1
            }
        }],
        "label": {
            "id": 1,
            "modelStorageId": null,
            "name": "地面作战",
            "number": 0
        }
    }, {
        "children": [{
            "children": [],
            "label": {
                "id": 103,
                "modelStorageId": null,
                "name": "作战舰船",
                "number": 126
            }
        }],
        "label": {
            "id": 126,
            "modelStorageId": null,
            "name": "海面作战",
            "number": 0
        }
    }, {
        "children": [{
            "children": [{
                "children": [],
                "label": {
                    "id": 245,
                    "modelStorageId": null,
                    "name": "嘎嘎嘎1",
                    "number": 130
                }
            }, {
                "children": [],
                "label": {
                    "id": 246,
                    "modelStorageId": null,
                    "name": "嘎嘎嘎",
                    "number": 130
                }
            }],
            "label": {
                "id": 130,
                "modelStorageId": null,
                "name": "空中武器",
                "number": 153
            }
        }],
        "label": {
            "id": 153,
            "modelStorageId": null,
            "name": "空中作战",
            "number": 0
        }
}],
<el-cascader
    v-model="newData.number"
    :options="modeType"
    :props="{ expandTrigger: 'hover' }"
    >
    <template slot-scope="{ node }">
        <span>{{ node.label.name }}</span>
    </template>
</el-cascader>

ElementUI 级联选择器的el-cascader校验

ElementUI 之 Cascader 级联选择器指定 value label

ElementUI 之 Cascader 级联选择器回显

vue element Cascader 级联选择器选择任意一级选项点击收起，点击label选中等问题详解