vue实现表格样式

Vue 实现表格样式的方法

使用原生 HTML 表格

通过 Vue 的模板语法直接渲染 HTML 表格，结合 CSS 控制样式。

<template>
  <table class="custom-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">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
.custom-table {
  width: 100%;
  border-collapse: collapse;
}
.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
.custom-table th {
  background-color: #f2f2f2;
}
.custom-table tr:nth-child(even) {
  background-color: #f9f9f9;
}
.custom-table tr:hover {
  background-color: #e9e9e9;
}
</style>

使用 Element UI 表格组件

Element UI 提供了丰富的表格组件和样式配置。

<template>
  <el-table :data="tableData" style="width: 100%" stripe border>
    <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>

使用 Vuetify 表格组件

Vuetify 提供了 Material Design 风格的表格组件。

<template>
  <v-data-table
    :headers="headers"
    :items="items"
    :items-per-page="5"
    class="elevation-1"
  ></v-data-table>
</template>

<script>
export default {
  data() {
    return {
      headers: [
        { text: '姓名', value: 'name' },
        { text: '年龄', value: 'age' }
      ],
      items: [
        { name: '张三', age: 25 },
        { name: '李四', age: 30 }
      ]
    }
  }
}
</script>

动态样式绑定

通过 Vue 的动态样式绑定实现条件样式。

<template>
  <table>
    <tr v-for="row in rows" :key="row.id" :class="{ 'highlight-row': row.highlight }">
      <td>{{ row.content }}</td>
    </tr>
  </table>
</template>

<style>
.highlight-row {
  background-color: yellow;
}
</style>

使用 CSS 框架

结合 Bootstrap 等 CSS 框架快速实现表格样式。

<template>
  <table class="table table-striped table-hover">
    <tr v-for="row in rows" :key="row.id">
      <td>{{ row.content }}</td>
    </tr>
  </table>
</template>

这些方法可以根据项目需求灵活选择，原生表格适合简单需求，UI 框架适合快速开发，动态样式绑定适合复杂交互场景。