004 封装表格样式模块

前言

之前咱们是已经封装了一个随机模块, 在这个随机模块中能够生成随机的用户信息, 并没有被用起来.

另外咱们还有一个想法, 那就是单独封装一个表格相关的样式模块, 也还没有实现.

所以,咱们继续开搞.

使用生成的随机用户数据

首先, 修改一下App.vue获取用户数据的逻辑, 使用随机数据.

import random from "./zdpui/js/random.js";

let users = ref(random.users(8))

此时我们可以发现, 代码少了非常多, 然后去界面看看效果.

在这里插入图片描述

效果也非常的不错, 数据非常的真实.

此时App.vue完整代码如下:

<script setup>
import {onMounted, ref} from "vue";
import random from "./zdpui/js/random.js";

let users = ref(random.users(8))
</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>

表格样式调整

为了便于封装统一的样式, 我们给这个表格样式取个名字, 就叫table1吧, 简单点, 意思就是我们的第一套表格样式.

我是取名鬼才,大家有想法的可以留言哈...

先个table加上样式:

<table class="table1">

然后在之前的所有样式前面加上一个层级, 表示是属于 table1 下面的样式:

table.table1 {
  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);
}

.table1 thead {
  background: linear-gradient(to right, #00c6ff, #0072ff);
  color: white;
}

.table1 th {
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px;
  text-align: left;
}

.table1 tbody tr:nth-child(even) {
  background-color: #f3f4f6;
}

.table1 tbody tr:hover {
  background-color: #e5e7eb;
  transition: background-color 0.3s;
}

.table1 tbody td {
  padding: 12px;
  text-align: left;
  border-top: 1px solid #e5e7eb;
}

.table1 th,
.table1 td {
  vertical-align: middle;
}

此时刷新页面, 确保样式没有变化:

在这里插入图片描述

封装表格样式模块

接下来, 我们就可以把这个样式代码抽离出来, 放到一个单独的css文件中了.

/*表格样式1开始*/
table.table1 {
  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);
}

.table1 thead {
  background: linear-gradient(to right, #00c6ff, #0072ff);
  color: white;
}

.table1 th {
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px;
  text-align: left;
}

.table1 tbody tr:nth-child(even) {
  background-color: #f3f4f6;
}

.table1 tbody tr:hover {
  background-color: #e5e7eb;
  transition: background-color 0.3s;
}

.table1 tbody td {
  padding: 12px;
  text-align: left;
  border-top: 1px solid #e5e7eb;
}

.table1 th,
.table1 td {
  vertical-align: middle;
}

/*表格样式1结束*/

此时, 我的项目结构是下面这样的:

在这里插入图片描述

使用封装的样式

接着我们回到App.vue, 只需要简单的引入css样式文件就行了.

import "./zdpui/css/table.css";

此时App.vue的完整代码如下:

<script setup>
import {onMounted, ref} from "vue";
import random from "./zdpui/js/random.js";
import "./zdpui/css/table.css";

let users = ref(random.users(8))
</script>
<template>
  <div>
    <table class="table1">
      <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>

刷新浏览器, 可以发现, 整体样式还是没有变化:

在这里插入图片描述

说明我们封装得比较成功.

总结

到目前为止, 我们就把之前的两个想法实现了, 完美, 可惜我不喝酒, 不然和大家喝酒庆祝一下!!!

至少我自己是比较开心的, 虽然简单, 但是我封装了自己的第一个样式文件, 第一个js文件, 后面可以不断的复用, 而且是没有任何第三方依赖的, 非常的舒服.

这比较符合我自己的预期啊.

接下来, 就是将html代码封装为组件了.

我们需要将html代码封装到一个组件中,就是我们的表格组件, 这个组件接收我们传入的表格内容数据和表头数据, 进行渲染.

期待我们能尽快实现这个目标.