vue实现tablegrid

使用 Vue 实现 Table Grid

在 Vue 中实现表格网格（Table Grid）可以通过多种方式完成，以下是几种常见的方法：

使用原生 HTML 表格

通过 Vue 的模板语法直接渲染 HTML 表格结构，适用于简单的静态表格。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td v-for="cell in row.cells" :key="cell.id">{{ cell.value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['Name', 'Age', 'Email'],
      rows: [
        { id: 1, cells: [{ id: 1, value: 'John' }, { id: 2, value: 25 }, { id: 3, value: 'john@example.com' }] },
        { id: 2, cells: [{ id: 4, value: 'Jane' }, { id: 5, value: 30 }, { id: 6, value: 'jane@example.com' }] }
      ]
    }
  }
}
</script>

使用第三方库（如 Element UI）

对于更复杂的需求，可以使用第三方 UI 库如 Element UI 提供的表格组件。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="Name" width="180"></el-table-column>
    <el-table-column prop="age" label="Age" width="180"></el-table-column>
    <el-table-column prop="email" label="Email"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 25, email: 'john@example.com' },
        { name: 'Jane', age: 30, email: 'jane@example.com' }
      ]
    }
  }
}
</script>

动态生成表格

如果需要动态生成表格列或行，可以使用计算属性或方法动态生成表格结构。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in dynamicHeaders" :key="header.key">{{ header.label }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in dynamicRows" :key="row.id">
        <td v-for="header in dynamicHeaders" :key="header.key">{{ row[header.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      dynamicHeaders: [
        { key: 'name', label: 'Name' },
        { key: 'age', label: 'Age' },
        { key: 'email', label: 'Email' }
      ],
      dynamicRows: [
        { id: 1, name: 'John', age: 25, email: 'john@example.com' },
        { id: 2, name: 'Jane', age: 30, email: 'jane@example.com' }
      ]
    }
  }
}
</script>

使用 Vue Grid Layout

对于需要拖拽排序或自定义布局的网格，可以使用 vue-grid-layout 库。

<template>
  <grid-layout
    :layout="layout"
    :col-num="12"
    :row-height="30"
    :is-draggable="true"
    :is-resizable="true"
  >
    <grid-item v-for="item in layout" :key="item.i" :x="item.x" :y="item.y" :w="item.w" :h="item.h">
      {{ item.content }}
    </grid-item>
  </grid-layout>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout'

export default {
  components: { GridLayout, GridItem },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '1', content: 'Item 1' },
        { x: 2, y: 0, w: 2, h: 2, i: '2', content: 'Item 2' }
      ]
    }
  }
}
</script>

响应式表格

为适应不同屏幕尺寸，可以通过 CSS 或框架提供的响应式功能实现。

<template>
  <div class="responsive-table">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td data-label="Name">{{ row.name }}</td>
          <td data-label="Age">{{ row.age }}</td>
          <td data-label="Email">{{ row.email }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<style>
.responsive-table {
  overflow-x: auto;
}

@media (max-width: 600px) {
  table {
    width: 100%;
  }
  td::before {
    content: attr(data-label);
    font-weight: bold;
    display: inline-block;
    margin-right: 10px;
  }
}
</style>

以上方法可以根据具体需求选择，从简单的静态表格到复杂的动态网格布局均可实现。