【案例】在html文件中，通过vue循环数据，填充到表格里

最新推荐文章于 2024-06-10 02:02:05 发布

程序酷巴戈

最新推荐文章于 2024-06-10 02:02:05 发布

阅读量842

点赞数 13

分类专栏：前端框架Vue 前端框架案例文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_55723857/article/details/135071712

版权

前端框架Vue 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

前端框架案例

3 篇文章 0 订阅

订阅专栏

【需求】定义一个html文件，通过vue将下面的数据，填充到表格中。

[{
id: 1,
name: "查看项目列表接口_INlove即时通讯项目",
tester: "酷巴戈",
project: "INlove即时通讯项目",
project_id: 2,
desc: "",
create_time: "2023-11-06 17:22:50",
testcases: 1
},
{
id: 2,
name: "登录接口_自动化测试平台项目",
tester: "csdn",
project: "自动化测试平台项目",
project_id: 1,
desc: "登录接口",
create_time: "2023-12-06 14:50:30",
testcases: 9
},
{
id: 3,
name: "注册接口_自动化测试平台项目",
tester: "CC",
project: "自动化测试平台项目",
project_id: 1,
desc: "自动化测试平台项目,注册接口",
create_time: "2019-11-06 14:51:00",
testcases: 0
},
{
id: 4,
name: "创建项目接口_自动化测试平台项目",
tester: "DD",
project: "自动化测试平台项目",
project_id: 1,
desc: "这是自动化测试平台创建项目接口",
create_time: "2019-11-06 14:51:45",
testcases: 1
},
{
id: 5,
name: "注册接口_INlove即时通讯项目",
tester: "csdn",
project: "前程贷P2P金融项目",
project_id: 2,
desc: "",
create_time: "2019-11-06 14:52:22",
testcases: 0
},
{
id: 6,
name: "登录接口_INlove即时通讯项目",
tester: "小猴子",
project: "INlove即时通讯项目",
project_id: 2,
desc: "",
create_time: "2019-11-06 14:52:40",
testcases: 0
}],

【分析需求】

【需要在html文件中】：先定义一个html文件

【通过vue】：要引入vue文件

【填充到表格中】：1、要把数据循环遍历（v-for可以实现）2、要知道在html中怎么写表格

【处理需求】

前面两步，在之前的文章中已经写过多次，此处不再赘述；v-for的使用 可以参考这篇文章：循环遍历v-for

在html中怎么写表格，给一个简单的示范：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<table border='1'>
				<tr>
					<td>ID</td>
					<td>接口名</td>
					<td>测试人员</td>
					<td>项目名</td>
					<td>项目ID</td>
					<td>描述信息</td>
					<td>创建时间</td>
					<td>用例数</td>
				</tr>
				<tr>
					<td>1</td>
					<td>登录接口_INlove即时通讯项目</td>
					<td>小猴子</td>
					<td>INlove即时通讯项目</td>
					<td>项目ID</td>
					<td>1</td>
					<td>2019-11-06 14:52:40</td>
					<td>0</td>
				</tr>
			</table>
	</body>
</html>

在html中定义表格，用table标签包裹，tr表示一行，td表示一行中的每一个单元格。如果想让表格有框线，那么就在table标签内加上border='1' 即可。

既然知道了 tr 是一行，td的每一行的单元格，那么我们现在需要实现的就是，使用 v-for 将data中数据一个一个的循环遍历到 td 中。(数据太多，暂且拿两组数据做个示范）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>通过vue将数据遍历到表格中</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id='app'>
			<table border="1">
				<tr>
					<td>ID</td>
					<td>接口名</td>
					<td>测试人员</td>
					<td>项目名</td>
					<td>项目ID</td>
					<td>描述信息</td>
					<td>创建时间</td>
					<td>用例数</td>
				</tr>
				<tr v-for='usercase in cases' :key="usercase.id">
					<td>{{usercase.id}}</td>
					<td>{{usercase.name}}</td>
					<td>{{usercase.tester}}</td>
					<td>{{usercase.project}}</td>
					<td>{{usercase.project_id}}</td>
					<td>{{usercase.desc}}</td>
					<td>{{usercase.create_time}}</td>
					<td>{{usercase.testcases}}</td>
				</tr>
			</table>
		</div>
		<script>
			var csdn= {
				data() {
					return {
						cases: [{
								id: 1,
								name: "查看项目列表接口_INlove即时通讯项目",
								tester: "酷巴戈",
								project: "INlove即时通讯项目",
								project_id: 2,
								desc: "",
								create_time: "2023-11-06 17:22:50",
								testcases: 1
							},
							{
								id: 2,
								name: "登录接口_自动化测试平台项目",
								tester: "csdn",
								project: "自动化测试平台项目",
								project_id: 1,
								desc: "登录接口",
								create_time: "2023-12-06 14:50:30",
								testcases: 9
							}
						],
					}
				},
				methods: {}
			}
			var app = Vue.createApp(csdn)
			app.mount('#app')
		</script>
	</body>
</html>

【解析】

<tr v-for='usercase in cases' :key="usercase.id"> 语句中，把每一次在cases数组中循环到的对象都赋值给usercase。

对于usercase来说，包括很多的key，如id、name、tester等等，是一个对象，就可以用.来查询key对于的value值。

:key 在使用v-for循环语句的时候，是很有必要添加的；当然此处没有使用索引，而是用了每一组数据自带的id。

【总结】

在这段代码中，主要训练使用v-for来遍历数组。如果还有不太熟悉的，可以再敲敲代码，自己多多练习。

思考：在真实列表中，一般都会有增删改查的操作。如果想要对案例列表进行“删改”这两个操作，该如何实现呢？

下一篇：如何实现列表的删除、修改。

程序酷巴戈

关注

13
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
【案例】在html文件中，通过vue循环数据，填充到表格里

在这段代码中，主要训练使用v-for来遍历数组。如果还有不太熟悉的，可以再敲敲代码，自己多多练习。思考：在真实列表中，一般都会有增删改查的操作。如果想要对案例列表进行“删改”这两个操作，该如何实现呢？下一篇：如何实现列表的删除、修改。
复制链接

扫一扫