iviewui级联选择 如何自定义?

Question

<template>
    <Cascader :data="data" v-model="value2"></Cascader>
</template>
<script>
    export default {
        data () {
            return {
                value2: ['jiangsu', 'suzhou', 'zhuozhengyuan'],
                data: [{
                    value: 'beijing',
                    label: '北京',
                    children: [
                        {
                            value: 'gugong',
                            label: '故宫'
                        },
                        {
                            value: 'tiantan',
                            label: '天坛'
                        },
                        {
                            value: 'wangfujing',
                            label: '王府井'
                        }
                    ]
                }, {
                    value: 'jiangsu',
                    label: '江苏',
                    children: [
                        {
                            value: 'nanjing',
                            label: '南京',
                            children: [
                                {
                                    value: 'fuzimiao',
                                    label: '夫子庙',
                                }
                            ]
                        },
                        {
                            value: 'suzhou',
                            label: '苏州',
                            children: [
                                {
                                    value: 'zhuozhengyuan',
                                    label: '拙政园',
                                },
                                {
                                    value: 'shizilin',
                                    label: '狮子林',
                                }
                            ]
                        }
                    ],
                }]
            }
        }
    }
</script>

如上面的代码 value和label 我总不能将我接口的每个返回项都改成value和label 吧!!

element-ui 就挺好的 有一个props配置 iviewui如何配置呢?

现在接口的返回数据格式为:

    {
      "id": 1,
      "name": "主类目1",
      "children":[
       {
        "id": 1,
        "name": "字类目1"
      }
      ]
    },
    {
      "id": 2,
      "name": "主类目2",
      "children": [
      {
        "id": 5,
        "name": "子类目2"
      }
      ]
    },

Answer 1

除非修改源码，否则不能自定义

源码里面就直接使用的value、label、children等属性

Answer 2

恩，确实是不支持你这样的数据结构的，你不行就让你们后端的同学改一下把

把你那里面的 name 换成 label 把，id 换成 value

源码里面确实如楼上的提到的是固定取的，上面那个图是来自：casitem.vue

真正展示每一个 item 的名字多是从 label 取的：

{{ data.label }}