Vue使用Cascader级联选择器数据回显

1.组件部分

注意:v-model(选中项绑定值),:props="{emitPath:false }"(在选中节点改变时,是否返回由该节点所在的各级菜单的值所组成的数组,若设置 false,则只返回该节点的值)

<el-cascader
    style="width:270px;margin-right:20px;"
    size="mini"
    ref="cascader"
    placeholder="请选择"
    v-model="configForm"
    :options="options"
    :props="{ multiple: false,emitPath:false}"
    collapse-tags
    :show-all-levels="false"
    filterable
    clearable>
</el-cascader>

2.js部分

注意:configForm取值为options 该节点的value

configForm:["yizhi","fankui","xiaolv","kekong"],
options: [{
          value: '*n',
          label: '指南',
          children: [{
            value: 'shejiyuanze',
            label: '设计原则',
            children: [{
              value: 'yizhi',
              label: '一致'
            }, {
              value: 'fankui',
              label: '反馈'
            }, {
              value: 'xiaolv',
              label: '效率'
            }, {
              value: 'kekong',
              label: '可控'
            }]
          }, {
            value: 'daohang',
            label: '导航',
            children: [{
              value: 'cexiangdaohang',
              label: '侧向导航'
            }, {
              value: 'dingbudaohang',
              label: '顶部导航'
            }]
          }]
        }, {
          value: 'zujian',
          label: '组件',
        }, {
          value: 'ziyuan',
          label: '资源', 
        }]

Vue使用Cascader级联选择器数据回显

 就可以实现数据回显了

上一篇:【实现】Vue用户管理页面


下一篇:模板渲染其实不难哦!