当前位置：首页 > 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 实现

Vue 实现的基本步骤安装 Vue.js 可以通过 npm 或 CDN 引入。使用 npm 安装适合大型项目，CDN 适合快速原型开发。 npm install vue 在 HTML 文件中引入…

vue 全景实现

Vue 全景实现方案在Vue中实现全景效果，通常需要结合WebGL或第三方库来处理3D场景渲染。以下是几种常见方法：使用Three.js库 Three.js是一个强大的WebGL库，适合创建3D…

vue实现必填

Vue 实现表单必填验证的方法在Vue中实现表单必填验证可以通过多种方式完成，以下是几种常见的方法：使用HTML5原生属性最简单的必填验证可以通过HTML5的required属性实现： &l…

vue实现双向

Vue 实现双向绑定的方法 Vue 的双向绑定主要通过 v-model 指令实现，它结合了数据绑定和事件监听，适用于表单元素（如 input、select、textarea 等）。以下是几种常见的实现…

mvvm实现vue

MVVM 模式在 Vue 中的实现 MVVM（Model-View-ViewModel）是一种前端架构模式，Vue 的设计灵感来源于此。以下是 MVVM 在 Vue 中的核心实现方式：数据绑定（M…

mui实现vue

mui 实现 Vue 的步骤 mui 是一个轻量级的前端框架，常用于移动端开发。结合 Vue 可以实现高效的开发体验。以下是具体实现方法。安装 mui 和 Vue 通过 npm 或 yarn 安装…

vue 表格实现