构造用户数据
有了基础代码以后, 我的想法就是逐步丰富代码, 用案例去驱动, 比如说, 现在想要实现用户管理的功能, 那么我们先构造一下用户的数据.
这个比较简单, 我们用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>
总结
虽然目前已经实现了表格的基本渲染, 也有了一定的样式, 但是还有很多的事情要做.
比如怎么封装成组件?
怎么抽离样式?
还有很多很多的问题要解决.
一个一个的解决问题, 慢慢的打磨.
