vue.js 嵌套循环渲染

经常用到嵌套循环渲染数据

比如在一个html页面上渲染全国所有的省直辖市及其下辖的市县

省级对市县一般是一对多的关系
在循环遍历省级单位时
需要对他的子集也进行遍历

市县类

public class City implements Serializable {
    private static final long serialVersionUID = 1876407617666848861L;
    private String cityId;
    private String cityName;
    private String provincialId;

    public String getCityId() {
        return cityId;
    }

    public void setCityId(String cityId) {
        this.cityId = cityId;
    }

    public String getCityName() {
        return cityName;
    }

    public void setCityName(String cityName) {
        this.cityName = cityName;
    }

    public String getProvincialId() {
        return provincialId;
    }

    public void setProvincialId(String provincialId) {
        this.provincialId = provincialId;
    }

    @Override
    public String toString() {
        return "{" +
                "cityId:" + cityId +
                ", cityName:" + cityName +
                ", provincialId:" + provincialId +
                '}';
    }
}

省级类

public class Provincial implements Serializable {
    private static final long serialVersionUID = 1167623414373639514L;

    private String provincialId;
    private String provincialName;

    private List<City> cityList; // 市县的集合  

    public String getProvincialId() {
        return provincialId;
    }

    public void setProvincialId(String provincialId) {
        this.provincialId = provincialId;
    }

    public String getProvincialName() {
        return provincialName;
    }

    public void setProvincialName(String provincialName) {
        this.provincialName = provincialName;
    }

    public List<City> getCityList() {
        return cityList;
    }

    public void setCityList(List<City> cityList) {
        this.cityList = cityList;
    }

    @Override
    public String toString() {
        return "{" +
                "provincialId:" + provincialId +
                ", provincialName:" + provincialName +
                ", cityList:" + cityList +
                '}';
    }
}

如果是简单的列表遍历应该不是问题如果是在一些模板中或者html中往往无法在正常情况下使用vue的指令

经过研究vue的 api 发现可以在

                                                         <template></template>

使用避免以下情况

<table border="1" style="border-collapse:collapse">
        <tr>
            <th>城市序号</th>
            <th>城市名称</th>
            <th>所属城市代号</th>
        </tr>
           在下面的tr 标签中   无法加入v-for 来嵌套的情况
            <tr >
                <th colspan="3">{{pro.provincialName}}</th>
            </tr>
          
                <tr>
                    <td>{{city.cityId}}</td>
                    <td>{{city.cityName}}</td>
                    <td>{{city.provincialId}}</td>
                </tr>
            
        </template>
    </table>

代码如下：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="${pageContext.request.contextPath}/static/jquery-1.11.3.js"></script>
    <script src="${pageContext.request.contextPath}/static/vue-2.2.6.js"></script>
    <title></title>
</head>
<body>
<div >

    <table border="1" style="border-collapse:collapse">
        <tr>
            <th>城市序号</th>
            <th>城市名称</th>
            <th>所属城市代号</th>
        </tr> 
    下面加入2个template  来执行指令 嵌套遍历
        <template v-for="pro in cities">
            <tr>
                <th colspan="3">{{pro.provincialName}}</th>
            </tr>
            <template v-for="city in pro.cityList">
                <tr>
                    <td>{{city.cityId}}</td>
                    <td>{{city.cityName}}</td>
                    <td>{{city.provincialId}}</td>
                </tr>
            </template>
        </template>
    </table>
</div>


</body>
<script>
    new Vue({
        el: '#app',
        data: {
            cities: ''
        },
        created: function () {
            var $this = this;
            var url = '/rycxApi/provincial/allPro';
            $.get(url, function (data) {
                console.log(data);
                $this.cities = data;
            })
        }
    });
</script>
</html>

达到了下面的效果

vue.js 嵌套循环渲染

vue.js 嵌套循环渲染

相关推荐