轻松驾驭复杂表格！前端动态表格导表指南（带示例代码）

前端

2023-09-01 00:35:51

Vue3 动态表格导表指南：掌控复杂表格

使用 Vue3 为您的 B 端和后台系统创建强大的可导出的表格

在 B 端和后台管理系统中，表格是必不可少的组件。从查看数据到编辑信息，表格在用户界面中扮演着至关重要的角色。为了满足复杂的需求，开发者需要灵活且功能强大的表格解决方案。

简介

本文将深入探讨如何使用 Vue3 构建动态表格，包括多级表头、表头行列合并以及表头样式设置。此外，我们将介绍如何轻松导出表格数据，为您的用户提供无缝的数据处理体验。

动态表格结构

1. 基本结构

要创建一个基本的表格，我们需要定义一个 <table> 元素，其中包含一个表头 (<thead>) 和一个表体 (<tbody>)。表头容纳表头信息，而表体则显示实际数据。

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
  </tbody>
</table>

2. 动态渲染数据

使用 Vue3，我们可以动态渲染表格数据。响应式数据将数据与 Vue 组件的 HTML 视图绑定在一起，使数据更新可以自动反映在表格中。

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const data = ref([
      { name: '张三', age: 20 },
      { name: '李四', age: 30 },
      { name: '王五', age: 40 }
    ])

    onMounted(() => {
      renderTable(data.value)
    })

    function renderTable(data) {
      // 获取表格元素
      const table = document.getElementById('my-table')

      // 清空表格内容
      table.innerHTML = ''

      // 创建表头
      const thead = document.createElement('thead')
      const tr = document.createElement('tr')
      const th1 = document.createElement('th')
      const th2 = document.createElement('th')
      const th3 = document.createElement('th')
      th1.textContent = '姓名'
      th2.textContent = '年龄'
      th3.textContent = '操作'
      tr.appendChild(th1)
      tr.appendChild(th2)
      tr.appendChild(th3)
      thead.appendChild(tr)

      // 创建表体
      const tbody = document.createElement('tbody')
      data.forEach(item => {
        const tr = document.createElement('tr')
        const td1 = document.createElement('td')
        const td2 = document.createElement('td')
        const td3 = document.createElement('td')
        td1.textContent = item.name
        td2.textContent = item.age
        td3.textContent = '操作'
        tr.appendChild(td1)
        tr.appendChild(td2)
        tr.appendChild(td3)
        tbody.appendChild(tr)
      })

      // 将表头和表体添加到表格中
      table.appendChild(thead)
      table.appendChild(tbody)
    }
  }
}

高级功能

3. 多级表头

如果需要创建分层的表头结构，我们可以使用嵌套的 <thead> 元素。子表头可以通过添加额外的 <tr> 行来创建。

<table>
  <thead>
    <tr>
      <th>表头1</th>
      <th>表头2</th>
      <th>表头3</th>
    </tr>
  </thead>
  <thead>
    <tr>
      <th>子表头1</th>
      <th>子表头2</th>
      <th>子表头3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
    </tr>
  </tbody>
</table>

4. 表头行列合并

使用 colspan 和 rowspan 属性，我们可以合并表头单元格，从而跨越多列或多行。

<table>
  <thead>
    <tr>
      <th colspan="2">表头1</th>
      <th colspan="2">表头2</th>
    </tr>
    <tr>
      <th>子表头1</th>
      <th>子表头2</th>
      <th>子表头3</th>
      <th>子表头4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>数据1</td>
      <td>数据2</td>
      <td>数据3</td>
      <td>数据4</td>
    </tr>
  </tbody>
</table>

5. 表头样式设置

为了美化表格的外观，我们可以使用 CSS 样式自定义表头。这可以包括更改背景颜色、字体和边框样式。

#my-table {
  border-collapse: collapse;
}

#my-table thead th {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
}

#my-table tbody td {
  border: 1px solid #ddd;
  padding: 5px;
  text-align: center;
}

导表功能

6. 导出为可下载文件

通过提供一个导出按钮，用户可以将表格数据导出为各种文件格式，如 CSV、Excel 或 PDF。这简化了数据的共享和分析。

<button @click="exportTable">导出为</button>

export default {
  methods: {
    exportTable() {
      // 获取表格数据
      const data = []
      document.querySelectorAll('#my-table tbody tr').forEach(row => {
        const cells = row.querySelectorAll('td')
        const dataRow = []
        cells.forEach(cell => {
          dataRow.push(cell.textContent)
        })
        data.push(dataRow)
      })

      // 创建工作簿
      const workbook = new XLSX.Workbook()

      // 创建工作表
      const worksheet = workbook.addWorksheet('Sheet 1')

      // 设置工作表数据
      worksheet.setData(data)

      // 导出工作簿
      XLSX.writeFile(workbook, 'my-table.xlsx')
    }
  }
}