vue表格预览实现

Vue 表格预览实现

使用 Element UI 的表格组件

Element UI 提供了功能丰富的表格组件，可以快速实现数据展示和预览。安装 Element UI 后，通过 el-table 组件渲染数据。

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 }
      ]
    }
  }
}
</script>

自定义表格样式

通过 CSS 调整表格样式，例如边框、行高、字体等，使其更符合需求。

<style>
.el-table {
  border: 1px solid #ebeef5;
}
.el-table th {
  background-color: #f5f7fa;
}
</style>

添加分页功能

结合 el-pagination 组件实现分页功能，提升大数据量的浏览体验。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 模拟数据请求
      this.tableData = [
        { name: '张三', age: 20 },
        { name: '李四', age: 22 }
      ];
      this.total = 2;
    }
  },
  created() {
    this.fetchData();
  }
}
</script>

实现表格数据的动态加载

通过 API 请求动态加载表格数据，适用于实际项目中的数据交互。

<script>
export default {
  methods: {
    fetchData() {
      axios.get('/api/data').then(response => {
        this.tableData = response.data.list;
        this.total = response.data.total;
      });
    }
  }
}
</script>

添加表格操作列

在表格中添加操作列，例如编辑、删除按钮，增强交互性。

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleEdit(scope.row)">编辑</el-button>
        <el-button @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  methods: {
    handleEdit(row) {
      console.log('编辑', row);
    },
    handleDelete(row) {
      console.log('删除', row);
    }
  }
}
</script>

表格数据导出

使用第三方库如 xlsx 实现表格数据导出为 Excel 文件。

<script>
import XLSX from 'xlsx';

export default {
  methods: {
    exportToExcel() {
      const worksheet = XLSX.utils.json_to_sheet(this.tableData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      XLSX.writeFile(workbook, 'data.xlsx');
    }
  }
}
</script>

表格数据的筛选和排序

通过 el-table 的内置功能实现数据的筛选和排序。

<template>
  <el-table :data="tableData" :default-sort="{prop: 'age', order: 'descending'}">
    <el-table-column prop="name" label="姓名" sortable></el-table-column>
    <el-table-column prop="age" label="年龄" sortable></el-table-column>
  </el-table>
</template>

以上方法可以根据实际需求灵活组合，实现功能完善的表格预览功能。