当前位置：首页 > VUE

vue表格实现

2026-02-10 12:49:51VUE

Vue 表格实现方法

使用 Element UI 的表格组件

安装 Element UI：

npm install element-ui

引入 Element UI 并注册表格组件：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

在模板中使用表格：

<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>

使用 Vuetify 的表格组件

安装 Vuetify：

npm install vuetify

引入 Vuetify 并注册表格组件：

import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';

Vue.use(Vuetify);

在模板中使用表格：

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

<script>
export default {
  data() {
    return {
      headers: [
        { text: 'Dessert (100g serving)', value: 'name' },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' }
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0
        }
      ]
    };
  }
};
</script>

自定义表格实现

如果需要完全自定义表格，可以使用 Vue 的 v-for 指令手动渲染表格：

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

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '城市'],
      items: [
        { 姓名: '张三', 年龄: 25, 城市: '北京' },
        { 姓名: '李四', 年龄: 30, 城市: '上海' }
      ]
    };
  }
};
</script>

使用第三方表格库

如果需要更高级的功能（如排序、分页、过滤等），可以使用第三方表格库如 ag-grid-vue 或 vue-table-component。

安装 ag-grid-vue：

npm install ag-grid-community ag-grid-vue

使用 ag-grid-vue：

<template>
  <ag-grid-vue
    style="width: 500px; height: 300px;"
    class="ag-theme-alpine"
    :columnDefs="columnDefs"
    :rowData="rowData"
  ></ag-grid-vue>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: {
    AgGridVue
  },
  data() {
    return {
      columnDefs: [
        { headerName: 'Make', field: 'make' },
        { headerName: 'Model', field: 'model' },
        { headerName: 'Price', field: 'price' }
      ],
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 }
      ]
    };
  }
};
</script>

vue表格实现