当前位置：首页 > VUE

vue实现tablegrid

2026-01-07 08:18:15VUE

Vue 实现 TableGrid 的方法

使用 Element UI 的 Table 组件

Element UI 提供了强大的 Table 组件，可以快速实现表格布局。安装 Element UI 后，直接使用 el-table 标签即可。

<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 的 Data Table 组件

Vuetify 是另一个流行的 Vue UI 库，其 Data Table 组件功能丰富，支持排序、分页等功能。

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

<script>
export default {
  data() {
    return {
      headers: [
        { text: '日期', value: 'date' },
        { text: '姓名', value: 'name' },
        { text: '地址', value: 'address' }
      ],
      items: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' }
      ]
    }
  }
}
</script>

自定义 TableGrid 组件

如果需要完全自定义的表格，可以手动实现一个 TableGrid 组件。通过动态渲染列和数据，实现灵活的表格布局。

<template>
  <table class="custom-table">
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">{{ column.title }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="index">
        <td v-for="column in columns" :key="column.key">{{ row[column.key] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.custom-table {
  width: 100%;
  border-collapse: collapse;
}
.custom-table th, .custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>

使用第三方库如 AG Grid

AG Grid 是一个功能强大的表格库，支持 Vue 集成。适合需要复杂功能的场景，如分组、树形数据等。

<template>
  <ag-grid-vue
    style="width: 100%; height: 500px;"
    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: '日期', field: 'date' },
        { headerName: '姓名', field: 'name' },
        { headerName: '地址', field: 'address' }
      ],
      rowData: [
        { date: '2023-01-01', name: '张三', address: '北京市' },
        { date: '2023-01-02', name: '李四', address: '上海市' }
      ]
    }
  }
}
</script>

动态加载数据

表格数据通常从后端 API 获取。可以使用 axios 或 fetch 动态加载数据并更新表格。

<template>
  <el-table :data="tableData" v-loading="loading">
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="name" label="姓名"></el-table-column>
  </el-table>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      tableData: [],
      loading: false
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      axios.get('/api/data').then(response => {
        this.tableData = response.data
        this.loading = false
      })
    }
  }
}
</script>

vue实现tablegrid