基于iView的下拉分类多选

基于iView的下拉分类多选：

第一次写，可能有错误的地方，还请见谅。

本来是准备用级联选择器或树形选择器做多选的，但是看了很多，对数据要求都比较搞，就放弃了。

先看下效果

<FormItem style="text-align:left;width: 20%;" :label="this.$t('行业')" prop="industry">
          <Select v-model="ytzSaActivity.codeList" multiple style="width:500px"  placeholder="请选择行业">
            <OptionGroup
              v-for="(item, index) in industryList"
              :key="index"
              :label="item.name"
              :value="item.code">
              <Option v-for="(industry,idx) in item.industryList" :value="industry.code" :key="idx">{{ industry.name }}</Option>
            </OptionGroup>
          </Select>
</FormItem>

 data() {
    return { 

       ytzSaActivity: {
        
        codeList:[],
      
      },
        industryList:[
        {
            "id": 11,
            "name": "冶金",
            "code": "01",
            "parentId": null,
            "industryList": [
                {
                    "id": 12,
                    
                    "name": "黑色金属、有色金属等冶炼",
                    "code": "0101",
                    "parentId": "11",
                    "industryList": null
                },
                {
                    "id": 13,
                    
                    "name": "压延加工",
                    "code": "0102",
                    "parentId": "11",
                    "industryList": null
                }
            ]
        },
        {
            "id": 14,
            
            "name": "石化",
            "code": "02",
            "parentId": null,
            "industryList": [
                {
                    "id": 15,
                    
                    "name": "石油加工（精炼石油产品制造、炼焦等",
                    "code": "0201",
                    "parentId": "14",
                    "industryList": null
                },
                {
                    "id": 16,
                    
                    "name": "化工（基础化学原料、肥料、农药、涂料、合成材料等）",
                    "code": "0202",
                    "parentId": "14",
                    "industryList": null
                }
            ]
        },
        {
            "id": 17,
            
            "name": "建材",
            "code": "03",
            "parentId": null,
            "industryList": [
                {
                    "id": 18,
                   
                    "name": "水泥、玻璃、陶瓷等",
                    "code": "0301",
                    "parentId": "17",
                    "industryList": null
                }
            ]
        },
        {
            "id": 19,
            
            "name": "机械",
            "code": "04",
            "parentId": null,
            "industryList": [
                {
                    "id": 20,
                    
                    "name": "通用设备",
                    "code": "0401",
                    "parentId": "19",
                    "industryList": null
                },
                {
                    "id": 21,
                    
                    "name": "专用设备",
                    "code": "0402",
                    "parentId": "19",
                    "industryList": null
                },
                {
                    "id": 22,
                    
                    "name": "仪器仪表",
                    "code": "0403",
                    "parentId": "19",
                    "industryList": null
                },
                {
                    "id": 23,
                    
                    "name": "电气机械",
                    "code": "0404",
                    "parentId": "19",
                    "industryList": null
                },
                {
                    "id": 24,
                    
                    "name": "器材",
                    "code": "0405",
                    "parentId": "19",
                    "industryList": null
                }
            ]
        }
    ]
    }
}

记得加样式

<style lang="less">
.ivu-select-dropdown {
  ul {
    max-width: 480px;
    padding-top: 8px;
    li {
      width: 100%;
      height: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;/**不换行**/
      display: inline-block;
    }
  }
}
</style>