vue实现简单表格

Vue 实现简单表格的方法

使用原生 HTML 表格

在 Vue 模板中可以直接使用 HTML 原生表格标签，通过 v-for 动态渲染数据：

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in items" :key="item.id">
        <td v-for="(value, key) in item" :key="key">{{ value }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['ID', 'Name', 'Age'],
      items: [
        { id: 1, name: 'Alice', age: 25 },
        { id: 2, name: 'Bob', age: 30 }
      ]
    }
  }
}
</script>

使用 Element UI 表格组件

如果项目使用了 Element UI 组件库，可以更快速地实现功能丰富的表格：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180"></el-table-column>
    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' }
      ]
    }
  }
}
</script>

添加交互功能

为表格添加排序、筛选等交互功能：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    @sort-change="handleSortChange"
    @filter-change="handleFilterChange">
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      :filters="nameFilters"
      filter-placement="bottom-end"
      width="180">
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    handleSortChange(column) {
      console.log(column.prop, column.order)
    },
    handleFilterChange(filters) {
      console.log(filters)
    }
  }
}
</script>

响应式表格设计

确保表格在不同屏幕尺寸下都能良好显示：

@media screen and (max-width: 600px) {
  table {
    width: 100%;
  }
  thead {
    display: none;
  }
  tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
  }
  td {
    display: block;
    text-align: right;
    padding-left: 50%;
    position: relative;
  }
  td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 15px;
    font-weight: bold;
    text-align: left;
  }
}

虚拟滚动优化

对于大数据量表格，可以使用虚拟滚动提升性能：

<template>
  <recycle-scroller
    class="table"
    :items="largeData"
    :item-size="50"
    key-field="id">
    <template v-slot="{ item }">
      <div class="table-row">
        <div class="table-cell">{{ item.id }}</div>
        <div class="table-cell">{{ item.name }}</div>
      </div>
    </template>
  </recycle-scroller>
</template>