当前位置：首页 > VUE

vue 表格实现

2026-01-11 20:58:31VUE

Vue 表格实现方法

基础表格实现

使用 el-table 组件（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>

自定义列模板

通过插槽自定义列内容：

<el-table-column label="操作">
  <template #default="scope">
    <el-button @click="handleEdit(scope.row)">编辑</el-button>
    <el-button @click="handleDelete(scope.row)">删除</el-button>
  </template>
</el-table-column>

表格排序与筛选

添加排序和筛选功能：

vue 表格实现

<el-table-column 
  prop="date" 
  label="日期" 
  sortable
  :filters="[{text: '2023-01-01', value: '2023-01-01'}]"
  :filter-method="filterHandler">
</el-table-column>

分页功能

结合分页组件实现数据分页：

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

虚拟滚动优化

对于大数据量表格，可使用虚拟滚动：

vue 表格实现

<el-table
  :data="tableData"
  height="500"
  row-key="id"
  :row-height="50">
  <!-- 列定义 -->
</el-table>

响应式表格

根据屏幕尺寸调整表格显示：

computed: {
  tableHeight() {
    return window.innerHeight - 200
  }
}

<el-table :height="tableHeight"></el-table>

表格导出功能

实现表格数据导出为Excel：

import XLSX from 'xlsx'

exportTable() {
  const wb = XLSX.utils.table_to_book(document.querySelector('.el-table'))
  XLSX.writeFile(wb, '表格数据.xlsx')
}

动态列生成

根据配置动态生成列：

computed: {
  tableColumns() {
    return this.columnConfig.map(config => {
      return {
        prop: config.field,
        label: config.label,
        width: config.width || ''
      }
    })
  }
}

<el-table-column 
  v-for="col in tableColumns" 
  :key="col.prop"
  :prop="col.prop"
  :label="col.label"
  :width="col.width">
</el-table-column>

标签: 表格 vue

分享给朋友：

vue.js实现轮播

vue.js实现轮播的方法使用第三方库（如Swiper）安装Swiper库： npm install swiper 在Vue组件中引入Swiper： <template>…

vue实现评论编辑

Vue 实现评论编辑功能数据绑定与表单结构使用 v-model 双向绑定评论内容到表单输入框，确保编辑时能显示原内容并同步修改。示例模板结构： <template> <di…

vue如何实现注册

实现用户注册功能在Vue中实现注册功能通常需要结合前端表单和后端API交互。以下是完整的实现方案：创建注册表单组件注册表单需要包含用户名、邮箱、密码等基本字段，并进行表单验证： <…

vue实现添加用户

Vue 实现添加用户功能数据绑定与表单设计在 Vue 中实现添加用户功能，首先需要设计一个表单，用于收集用户输入的数据。通过 v-model 实现双向数据绑定，确保表单数据与 Vue 实例中的数据…

vue如何实现冒泡

Vue 实现冒泡排序在 Vue 中实现冒泡排序，可以通过数据绑定和响应式特性动态展示排序过程。以下是一个完整的实现示例，包含代码和详细说明。数据准备在 Vue 的 data 中定义一个数组作为…

vue的动画实现

Vue 动画实现方式 Vue 提供了多种方式实现动画效果，主要通过内置组件和第三方库支持。使用 Vue 内置过渡组件 Vue 的 transition 和 transition-group 组件可…

vue 表格实现