当前位置：首页 > VUE

vue表格预览实现

2026-02-20 06:57:08VUE

实现Vue表格预览的方法

在Vue中实现表格预览功能通常需要结合表格组件和数据展示逻辑。以下是几种常见的方法：

使用Element UI的el-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>

使用VxeTable实现高级表格预览

VxeTable提供了更丰富的表格功能：

<template>
  <vxe-table :data="tableData">
    <vxe-column type="seq" title="序号" width="60"></vxe-column>
    <vxe-column field="name" title="姓名"></vxe-column>
    <vxe-column field="age" title="年龄"></vxe-column>
    <vxe-column field="address" title="地址"></vxe-column>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 25, address: '北京' },
        { name: '李四', age: 30, address: '上海' }
      ]
    }
  }
}
</script>

实现表格数据导出预览

添加导出功能前预览数据：

methods: {
  previewExport() {
    // 获取要导出的数据
    const exportData = this.tableData.map(item => {
      return {
        姓名: item.name,
        年龄: item.age,
        地址: item.address
      }
    })

    // 在控制台预览导出数据
    console.table(exportData)

    // 或者显示在页面上
    this.previewData = exportData
  }
}

实现表格打印预览

添加打印预览功能：

<template>
  <div>
    <button @click="printPreview">打印预览</button>
    <div ref="printContent">
      <!-- 表格内容 -->
      <table>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.address }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    printPreview() {
      const printContent = this.$refs.printContent.innerHTML
      const originalContent = document.body.innerHTML
      document.body.innerHTML = printContent
      window.print()
      document.body.innerHTML = originalContent
    }
  }
}
</script>

添加分页和搜索功能

增强表格预览体验：

<template>
  <div>
    <el-input v-model="searchText" placeholder="搜索..."></el-input>
    <el-table 
      :data="filteredData"
      border
      style="width: 100%">
      <!-- 列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      allData: [] // 全部数据
    }
  },
  computed: {
    filteredData() {
      return this.allData.filter(item => 
        item.name.includes(this.searchText) ||
        item.address.includes(this.searchText)
      ).slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      )
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

以上方法可以根据具体需求选择使用，或组合使用来满足不同的表格预览场景。

vue表格预览实现