动态绑定elementUI级联选择器的值和显示内容

前端中大部分的数据都是由访问后台接口获取到。所以我们需要将获取到的数据再绑定到对应的组件中。其中接口对应的字段和组件中要绑定的字段不一样完全一致，所以我们要设置相应的属性，实现联动，一一对应。

后台返回的数据格式如下

[{
          value: 'zhinan',
          name: '指南',
          children: [{
            value: 'shejiyuanze',
            name: '设计原则',
            children: [{
              value: 'yizhi',
              name: '一致'
            }, {
              value: 'fankui',
              name: '反馈'
            }, {
              value: 'xiaolv',
              name: '效率'
            }, {
              value: 'kekong',
              name: '可控'
            }]
          }, {
            value: 'daohang',
            name: '导航',
            children: [{
              value: 'cexiangdaohang',
              name: '侧向导航'
            }, {
              value: 'dingbudaohang',
              name: '顶部导航'
            }]
          }]
        }]

查看官方文档可知，显示文本对应的是props 中的label属性。因此在data中新增属性设置label ，并在template中对应的级联选择器绑定属性。

  data(){
  	return{
  	 props:{
        multiple: true,	// 多选
        label: 'name'	// 将对象中的name绑定到组件的label属性上
      },
      cascaderVal:[],
      
  	}
  }

  <el-cascader      
     v-model="cascaderVal"
     :options="options"
     collapse-tags
     clearable
     :props='props'
   >
     <template slot-scope="{node,data}">
       <span>{{data.label}}</span>
       <span v-if="!node.isLeaf">({{data.children.length}})</span>
     </template>
   </el-cascader>   

关键点在于:要设置props属性，参考elementui官方文档，还可以手动绑定value和children属性，当返回接口和组件属性值不一致时。官方地址：https://element.eleme.io/#/zh-CN/component/cascader