当前位置：首页 > article >正文

基于Vue 3 简单自定义Table组件（乞丐版）

article 2025/2/1 9:44:03

本技术文档介绍了如何使用 Vue 3 和 TypeScript 构建一个高度可定制的表格组件，并通过插槽支持自定义列内容。本文档将详细讲解表格组件的实现原理、结构、使用方法以及样式定制。

1. 组件概述

这个 Table 组件是一个高度可定制的表格，支持传入数据、列配置，并允许通过插槽自定义列的内容。其核心功能包括：

根据传入的数据和列配置动态渲染表格
支持自定义列内容渲染
支持列宽度的定制
可通过插槽灵活替换列的内容展示

2. 组件结构

模板结构

<template>
  <div class="custom-table">
    <!-- 表头 -->
    <div class="custom-table-header">
      <div
        class="custom-table-header-cell"
        v-for="column in columns"
        :key="column.prop"
        :style="{ width: column.width || 'auto' }"
      >
        {{ column.label }}
      </div>
    </div>

    <!-- 表格内容 -->
    <div class="custom-table-body">
      <div
        class="custom-table-row"
        v-for="(row, rowIndex) in data"
        :key="rowIndex"
      >
        <div
          class="custom-table-cell"
          v-for="column in columns"
          :key="column.prop"
          :style="{ width: column.width || 'auto' }"
        >
          <!-- 插槽支持 -->
          <slot :name="column.prop" :row="row" :index="rowIndex">
            {{ row[column.prop] }}
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

定义数据结构

<script setup lang="ts">
defineProps<{ data: any[]; columns: any[] }>();
</script>

样式

<style scoped>
.custom-table {
  display: flex;
  flex-direction: column;
  border-radius: 2px;
  overflow: hidden;
  font-size: 12px;
}

.custom-table-header {
  display: flex;
  font-weight: bold;
  background-image: url("pics/表格色块.png");
  color: #9cbdd2;
}

.custom-table-header-cell {
  padding: 10px;
  text-align: left;
  flex-shrink: 0;
}

.custom-table-body {
  display: flex;
  flex-direction: column;
}

.custom-table-row {
  display: flex;
  color: #c4c5ca;
}

.custom-table-row:nth-child(odd) {
  background-color: #051c2f;
}
.custom-table-row:nth-child(even) {
  background-color: #031224;
}

.custom-table-cell {
  padding: 10px;
  text-align: left;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>

2. 样式定制

组件的样式通过 scoped 样式进行隔离，避免与其他组件的样式冲突。样式主要控制表格的布局、字体、颜色和间距等，以下是一些可定制的样式：

表头样式：可以修改 .custom-table-header 和 .custom-table-header-cell 来调整表头的背景颜色、字体、间距等。
行样式：通过 .custom-table-row 和 nth-child 伪类为奇偶行设置不同的背景颜色。
单元格样式：.custom-table-cell 用于控制单元格的内边距、文本溢出和文本对齐等。

定制背景图

通过修改 .custom-table-header 中的 background-image 属性，可以为表头添加背景图。图像路径可以根据实际需求调整。

列宽定制

在列配置中，您可以为每列设置 width 属性，以控制列的宽度：

{ prop: "conclusion", label: "规则名称", width: "150px" },

3. 使用案例

基本用法

定义表格数据和列配置：

    <Table :data="tableData" :columns="tableColumns">
      <!-- 自定义列内容 -->
      <template #name="{ row }">
        <span style="color: blue">{{ row.name }}</span>
      </template>
    </Table>

const tableData = ref([
  {
    conclusion: "绕组短路",
    equipmentPositionName: "电机组件",
    reason: "故障原因",
    solution: "解决措施",
  },
  {
    conclusion: "绕组短路",
    equipmentPositionName: "电机组件",
    reason: "故障原因",
    solution: "解决措施",
  },
]);

const tableColumns = ref([
  { prop: "conclusion", label: "规则名称", width: "100px" },
  { prop: "equipmentPositionName", label: "所属部位", width: "100px" },
  { prop: "reason", label: "故障类型", width: "100px" },
  { prop: "solution", label: "解决措施" },
]);