前端渲染树形结构

html结构:

			<table cellspacing="0" cellpadding="0" border="0">
                <tr v-for="item in dsList">
                    <td style="width:120px;">
                        <checkbox :title="item.name">{
   
   {item.name}}</checkbox>
                    </td>
                    <td>
                        <span v-for="Citem in item.qyList">
                            <checkbox :title="Citem.name">{
   
   {Citem.name}}</checkbox>
                        </span>
                    </td>
                </tr>
            </table>

要解析渲染的数据

				dsList: [
                    {
                        "name": "杭州",
                        qyList: [
                            {"name": "杭州1"},
                            {"name": "杭州2"},
                        ]
                    },
                    {
                        "name": "金华",
                        qyList: [
                            {"name": "金华1"},
                            {"name": "金华2"},
                        ]
                    },
                ]

效果图如下所示:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/wytraining/article/details/101364712