vue表格实现教学

Vue 表格实现方法

使用 Element UI 的 el-table 组件

Element UI 提供了功能强大的表格组件 el-table，支持排序、筛选、分页等功能。安装 Element UI 后，可以直接在 Vue 项目中使用。

<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: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }
      ]
    }
  }
}
</script>

使用 Vuetify 的 v-data-table 组件

Vuetify 是另一个流行的 Vue UI 框架，其 v-data-table 组件提供了丰富的功能，包括排序、分页、行选择和搜索。

<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="(row, index) in rows" :key="index">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

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

添加交互功能

为表格添加排序、筛选或分页功能可以提升用户体验。以下是一个简单的排序功能实现示例。

<template>
  <table>
    <thead>
      <tr>
        <th v-for="header in headers" :key="header" @click="sortBy(header)">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in sortedRows" :key="index">
        <td v-for="(cell, cellIndex) in row" :key="cellIndex">{{ cell }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      headers: ['姓名', '年龄', '城市'],
      rows: [
        ['张三', 25, '北京'],
        ['李四', 30, '上海']
      ],
      sortKey: '',
      sortOrder: 1
    }
  },
  computed: {
    sortedRows() {
      if (!this.sortKey) return this.rows
      const index = this.headers.indexOf(this.sortKey)
      return [...this.rows].sort((a, b) => {
        return a[index] > b[index] ? this.sortOrder : -this.sortOrder
      })
    }
  },
  methods: {
    sortBy(header) {
      if (this.sortKey === header) {
        this.sortOrder *= -1
      } else {
        this.sortKey = header
        this.sortOrder = 1
      }
    }
  }
}
</script>

集成第三方表格库

对于复杂的数据表格需求，可以考虑集成专门的表格库如 ag-Grid 或 Handsontable。这些库提供了高级功能如虚拟滚动、单元格编辑和 Excel 导出。

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