002 用户数据的构造和渲染
构造用户数据
有了基础代码以后, 我的想法就是逐步丰富代码, 用案例去驱动, 比如说, 现在想要实现用户管理的功能, 那么我们先构造一下用户的数据.
这个比较简单, 我们用js代码来构造一下:
import {onMounted, ref} from "vue";
let users = ref([])
onMounted(() => {
for (let i = 0; i < 8; i++) {
users.value.push({
id: i,
name: `张三${i}`,
age: 18 + i,
})
}
})
这里的数据先不要构造太多了, 因为太多了不好看, 现在还没有分页功能, 太多了装不下.
我喜欢一点一点的来.
我的代码是写在App.vue里面的, 此时App.vue里面的代码如下:
<script setup>
import {onMounted, ref} from "vue";
let users = ref([])
onMounted(() => {
for (let i = 0; i < 8; i++) {
users.value.push({
id: i,
name: `张三${i}`,
age: 18 + i,
})
}
})
</script>
<template>
<div>zdpui</div>
</template>
渲染用户数据
有了用户数据以后, 就要想着怎么渲染了.
渲染肯定是用表格, 加上简单的vue的语法, 我们可以通过下面的代码来渲染用户数据.
<template>
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="user.id">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
此时页面的渲染效果如下:
在这段代码中, 我并没有用什么高级的东西, 都是一些HTML的基础语法, table表示表格, thead表示表头, tbody表示表内容.
现在表格还比较丑,我们可以追加一些样式.
此时, App.vue 完整代码如下:
<script setup>
import {onMounted, ref} from "vue";
let users = ref([])
onMounted(() => {
for (let i = 0; i < 8; i++) {
users.value.push({
id: i,
name: `张三${i}`,
age: 18 + i,
})
}
})
</script>
<template>
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="user.id">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
美化表格样式
为了让表格更好看, 我添加了下面的样式:
pass
这里在准备动手写样式的时候, 我决定先让kimi帮我美化一下, 所以我问了kimi.
kimi给了我一些代码, 我决定去试试:
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
thead {
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
}
th {
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px;
text-align: left;
}
tbody tr:nth-child(even) {
background-color: #f3f4f6;
}
tbody tr:hover {
background-color: #e5e7eb;
transition: background-color 0.3s;
}
tbody td {
padding: 12px;
text-align: left;
border-top: 1px solid #e5e7eb;
}
th, td {
vertical-align: middle;
}
我试了一下kimi给的这个样式, 感觉还可以, 给大家也看看:
暂时对表格页面没有特别大的想法, 所以我决定先用这个.
此时, App.vue 代码如下:
<script setup>
import {onMounted, ref} from "vue";
let users = ref([])
onMounted(() => {
for (let i = 0; i < 8; i++) {
users.value.push({
id: i,
name: `张三${i}`,
age: 18 + i,
})
}
})
</script>
<template>
<div>
<table>
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr v-for="(user, index) in users" :key="user.id">
<td>{{ index + 1 }}</td>
<td>{{ user.name }}</td>
<td>{{ user.age }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<style scoped>
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
thead {
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
}
th {
text-transform: uppercase;
letter-spacing: 1px;
padding: 12px;
text-align: left;
}
tbody tr:nth-child(even) {
background-color: #f3f4f6;
}
tbody tr:hover {
background-color: #e5e7eb;
transition: background-color 0.3s;
}
tbody td {
padding: 12px;
text-align: left;
border-top: 1px solid #e5e7eb;
}
th, td {
vertical-align: middle;
}
</style>
总结
虽然目前已经实现了表格的基本渲染, 也有了一定的样式, 但是还有很多的事情要做.
比如怎么封装成组件?
怎么抽离样式?
还有很多很多的问题要解决.
一个一个的解决问题, 慢慢的打磨.