下拉选分类显示

数据处理

const company=[
    {
        "id": 146,
        "name": "山阿的声音东",
        "company_name": "山东区域"
    },
    {
        "id": 146,
        "name": "山所发生的东",
        "company_name": "山东区域"
    },
    {
        "id": 146,
        "name": "河禄禾否贸南",
        "company_name": "河南区域"
    },
    {
        "id": 146,
        "name": "河禄是禾贸南",
        "company_name": "河南区域"
    },
    {
        "id": 146,
        "name": "兴农的业山东",
        "company_name": "上海区域"
    },
    {
        "id": 146,
        "name": "兴说法农业",
        "company_name": "上海区域"
    },
]

let options:any=[]
    company.forEach((v)=>{
        let flag=options.some((i)=>{
            if(i.label==v.company_name){
                i.options.push({
                    label: v.name,
                    value: v.id,
                })
                return true
            }
            return false
        })
        if(!flag){
            options.push({
                label: v.company_name,
                options: [{
                    label: v.name,
                    value: v.id,
                }],
            })
        }
    })

数据展示

  <el-select v-model="value" multiple clearable collapse-tags filterable :popper-append-to-body="false">
    <el-option-group
      v-for="group in options"
      :key="group.label"
      :label="group.label"
    >
      <el-option
        v-for="item in group.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-option-group>
  </el-select>