用ul li动态绘制简易表格

Julyued

于 2024-03-14 15:31:53 发布

阅读量525

点赞数 9

文章标签：前端 vue css

本文链接：https://blog.csdn.net/weixin_42166279/article/details/136712228

版权

本文描述了如何通过JavaScript在前端使用模板循环展示后端接口获取的政策数据，包括统计信息和子菜单。主要涉及了数据获取、处理和列表渲染的过程。

摘要由CSDN通过智能技术生成

实现效果：

1.定义 const newStatisticsPolicyList = ref([])

循环li 将需要显示的值{{}}在P标签中

<ul>

          <li v-for="(item, index) in newStatisticsPolicyList" :key=index>{{ `${item.name}(${item.sum})` }}

            <div v-for="(item1, index1) in item.statisticsResps" :key=index1 >

               <p>{{ `${item1.name}(${item1.sum})` }}</p>

            </div>

            <p v-if="!item.statisticsResps">暂无二级菜单</p>

          </li>

         </ul>

2.调用后端接口拿数据

const getStatisticsContent3 = async (data) => {
  // chartsData.loading3 = true
  let res = await policyService(data)
  console.log(res,'政策数据')
  if (res.code == 200) {
    newStatisticsPolicyList.value = res.data.newStatisticsPolicyList
    state.totalAll1 = res.data.sumTotal
  }
}

后端数据结构：

{
    "code": 200,
    "message": "调用成功",
    "data": {
        "id": "1734887100080640001",
        "name": "政策和综合服务",
        "sum": 1,
        "ranking": 29,
        "sumTotal": 58,
        "newStatisticsPolicyList": [
            {
                "id": "1735550842703355905",
                "name": "人才政策",
                "sum": 81,
                "ranking": 7,
                "sumTotal": 0,
                "statisticsResps": null
            },
            {
                "id": "1735559883940941826",
                "name": "人才平台",
                "sum": 2,
                "ranking": 23,
                "sumTotal": 15,
                "statisticsResps": [
                    {
                        "id": "1737058914521280513",
                        "name": "产业园区",
                        "sum": 11,
                        "ranking": 11
                    },
                    {
                        "id": "1737058891066732545",
                        "name": "高层次人才服务中心",
                        "sum": 1,
                        "ranking": 25
                    },
                    {
                        "id": "1737058931348828162",
                        "name": "大专院校",
                        "sum": 1,
                        "ranking": 26
                    }
                ]
            },
                ]
            },

        ]
    },
    "success": true
}