Vant ui组件实现动态二级联动

效果展示:

Vant ui组件实现动态二级联动_第1张图片Vant ui组件实现动态二级联动_第2张图片

数据库数据

Vant ui组件实现动态二级联动_第3张图片

后端实现

Vant ui组件实现动态二级联动_第4张图片

Vant ui组件实现动态二级联动_第5张图片 

Vant ui组件实现动态二级联动_第6张图片 

 封装成需要的数据

Vant ui组件实现动态二级联动_第7张图片

package cms.web.action;

import cms.bean.company.Company;
import cms.bean.company.CompanyMultistage;
import cms.service.company.CompanyService;
import com.alibaba.fastjson.JSON;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;


@RestController
public class CompanyAction {

    @Autowired
    private CompanyService companyService;

    //二级联动数据
    @GetMapping("/company/data")
    public String findHobby() {
        List companyList = companyService.findCompany();
        HashMap map = new HashMap();//存教育单位
        List hobbyMultistageList = new ArrayList<>();

        HashMap mapx = new HashMap();//存湘钢单位
        List hobbyMultistageListw = new ArrayList<>();

        HashMap mapy = new HashMap();//存医疗单位
        List hobbyMultistageListy = new ArrayList<>();

        HashMap mapz = new HashMap();//存政府单位
        List hobbyMultistageListz = new ArrayList<>();

        for (Company company : companyList) {
            CompanyMultistage companyMultistage = new CompanyMultistage();

            if (company.getParentid() == 1) {//判断是否为湘钢单位
                companyMultistage.setText(company.getName());
                companyMultistage.setValue(String.valueOf(company.getWid()));
                hobbyMultistageListw.add(companyMultistage);

                mapx.put("text", company.getParentname());
                mapx.put("value", company.getParentid());
                mapx.put("children", hobbyMultistageListw);
            } else if (company.getParentid() == 2) {//判断是否为医疗单位
                companyMultistage.setText(company.getName());
                companyMultistage.setValue(String.valueOf(company.getWid()));
                hobbyMultistageListy.add(companyMultistage);

                mapy.put("text", company.getParentname());
                mapy.put("value", company.getParentid());
                mapy.put("children", hobbyMultistageListy);
            } else if (company.getParentid() == 3) {//判断是否为教育单位
                companyMultistage.setText(company.getName());
                companyMultistage.setValue(String.valueOf(company.getWid()));
                hobbyMultistageList.add(companyMultistage);

                map.put("text", company.getParentname());
                map.put("value", company.getParentid());
                map.put("children", hobbyMultistageList);

            }else if (company.getParentid() == 4) {//判断是否为政府单位
                companyMultistage.setText(company.getName());
                companyMultistage.setValue(String.valueOf(company.getWid()));
                hobbyMultistageListz.add(companyMultistage);

                mapz.put("text", company.getParentname());
                mapz.put("value", company.getParentid());
                mapz.put("children", hobbyMultistageListz);

            }
        }
        //将所有数据存hobbyLists里
        List companyLists = new ArrayList<>();
                companyLists.add(mapz);
                companyLists.add(mapx);
                companyLists.add(map);
                companyLists.add(mapy);

            return JSON.toJSONString(companyLists);
    }


}

Vant ui组件实现动态二级联动_第8张图片

 

你可能感兴趣的:(ui,vue,spring,boot)