用ul li动态绘制简易表格

本文主要是介绍用ul li动态绘制简易表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现效果：

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 = truelet res = await policyService(data)console.log(res,'政策数据')if (res.code == 200) {newStatisticsPolicyList.value = res.data.newStatisticsPolicyListstate.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
}

这篇关于用ul li动态绘制简易表格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---