＜el-cascader＞级联选择器

先上效果图 

<el-cascader
   v-model="chooes"
   :options="options"
   :show-all-levels="false"
   clearable style="width: 100%;">
</el-cascader>


data () {
    return {
      chooes:[],
      options: [  
        {  
          value: '1', // 确保 value 是唯一的  
          label: '父选项1',  
          children: [  
            {  
              value: '1-1', 
              label: '子选项1-1', 
            },  
            {  
              value: '1-2', 
              label: '子选项1-2', 
            },  
          ],  
        },  
        {  
          value: '2', // 确保 value 是唯一的  
          label: '父选项2',  
          children: [  
            {  
              value: '2-1', 
              label: '子选项2-1', 
              children:[
                {  
                  value: '2-1-1', 
                  label: '子选项2-1-1', 
                },
              ]
            },  
            {  
              value: '2-2', 
              label: '子选项2-2', 
            },  
          ],  
        },
      ],
    }
}

数据的类型需要为一个value来确定他的级，label是他的值，也就是我们要显示的内容，要需要一个children（如果他不是最后一级）。

多选模式

<el-cascader
    v-model="chooes"
    :options="options"
    :show-all-levels="false"
    :props="{multiple: true ,emitPath:false}"
    clearable style="width: 100%;">
</el-cascader>

multiple: true：开启多选

emitPath:false：如果绑定change事件，true时返回的是全路径（父亲的value+当前的value），false时返回的是当前路径（value值）比如以上面的数据为例，选中子选项2-1-1

true	["2","2-1","2-1-1"]
fasle	["2-1-1"]