vue/vux+ssm 嵌套JSON数组的前后台处理方式

嵌套JSON数组的前后台处理方式，今天终于完成了这样的效果：

前台页面的写法：

<template>
	<div>
		<Header></Header>
		<router-view></router-view>
		<h3 style="margin:20px 0 20px 20px">我的市场</h3>

		<div v-for="(list,listIndex) in lists">
			<hr style="height:1px;border:none;border-top:1px solid green;">
			<cell :title="list.医院名称" is-link :link="{path:'work/hospBasicInfor',query:{hospital:list.hospital}}"></cell>
			<x-table :cell-bordered="false" :content-bordered="false" style="background-color:#fff;"
			v-for="(officeItem,officeIndex) in list.科室名称">
				<tr style="background-color: #F7F7F7">
				<th colspan="5" @click="spaceChange(listIndex,officeIndex)">{{ officeItem.科室名称}}</th>
				</tr>
				<tbody>
					<tr v-if="officeItem.show">
						<td height="50px;"></td>
						<td><x-button mini type="primary">基本信息</x-button></td>
						<td><x-button mini type="primary">工作汇报</x-button></td>
						<td><x-button mini type="primary">客户档案</x-button></td>
						<td><x-button mini type="primary">患者档案</x-button></td>
					</tr>
				</tbody>
			</x-table>
		</div>
		
		<Footer></Footer>
	</div>
</template>
<script >
import Footer from './Footer'
import Header from '../Header'
import { XTable, LoadMore, XButton, Cell,CellBox,Box} from 'vux'

export default {
	data(){
		return{

			lists:[]
		}
	},
    methods: {
    	spaceChange (listIndex,officeIndex) {
    		console.log(listIndex+"  "+officeIndex);
    		this.lists[listIndex].科室名称[officeIndex].show = !this.lists[listIndex].科室名称[officeIndex].show
    	},
    	getHospitalInfor(){
    		this.$router.replace({ path: '/work/hosBasicInfor'})
    	}
    },
    created () {
    	this.$http.get('',{
        		withCredentials: true  //打开cookie
        	})
    	.then(({data}) => {
    		console.log(data)
    		this.lists = data.result
    	})
    },
    components:{
    	Footer,
    	Header,
    	XTable,
    	LoadMore,
    	XButton,
    	Cell,
    	CellBox,
    	Box
    }
}
</script>
<style scoped>
* { touch-action: none; }
</style>

前台界面注意几个地方：

1.  2个v-for 嵌套循环时，要注意嵌套情况下参数的使用和索引的使用。v-for中（）的2个参数，第一个是实例，第二个是索引

2.  spaceChange方法的写法，穿入地址相关的索引，然后精确的找到该按钮的show参数

3.  ajax的请求地址，要注意，我刚刚在前面讲过这个问题。vux+ssm 前后台分离的跨域问题（续）

后台处理思路：

数据库中有2张相关表：医院表和科室表，思路是先利用负责人id查找相关医院，然后遍历医院查找医院下面的科室。

由于前台有一个点击科室，分别显示下拉按钮的功能，所以，在每个科室里面还要添加控制下拉界面的参数“show”。所以还需要遍历每个科室，在其中添加一个show属性

后台的具体实现：

扫描二维码关注公众号，回复： 2231032 查看本文章

    String staffId= "xxxxxxx";
        List<BasicHospAndOffice> hosp_Office = new ArrayList<BasicHospAndOffice>();
        try {
            String  basicHosp = basicHospMinuteService.selectHospB(staffId);
            List hospList = new ArrayList();
            hospList.add(basicHosp);
            for (int i=0; i <hospList.size(); i++) {
                String hosp = hospList.get(i).toString();
                //查找医院名
                String hosp_hosp = hosp.replace("[", "").replace("]", "");
                //查找科室名
                List basicOffice = basicOfficeService.selectHospO(hosp_hosp);

                //遍历科室给每个科室添加show属性，并赋值到officeWithShows数组中
                List<OfficeWithShow> officeWithShows = new ArrayList<>();
                for(int n=0;n<basicOffice.size();n++){
                    OfficeWithShow officeWithShow = new OfficeWithShow();
                    String s = (String) basicOffice.get(n);
                    officeWithShow.set科室名称(s);
                    officeWithShow.setShow(false);
                    officeWithShows.add(officeWithShow);
                }

                BasicHospAndOffice bo = new BasicHospAndOffice();
                bo.set医院名称(hosp_hosp);
                bo.set科室名称(officeWithShows);
                hosp_Office.add(bo);

                if (hosp_Office != null) {
                    return new JsonResult(JsonResult.SUCCESSCODE, "查询成功", hosp_Office);
                } else {
                    return new JsonResult(JsonResult.FAILURECODE, "暂无信息，负责人编号输入有误！", "负责人编号输入有误！");
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResult(JsonResult.FAILURECODE,"错误信息",e);
        }