vue element实现表格

使用 Vue 和 Element UI 实现表格

Element UI 提供了 el-table 组件用于快速构建功能丰富的表格。以下是实现步骤和示例代码。

安装 Element UI

确保项目已安装 Vue 和 Element UI。若未安装，可通过以下命令安装：

npm install element-ui

在 main.js 中全局引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

基础表格实现

在 Vue 组件中，使用 el-table 和 el-table-column 定义表格结构和列：

<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: '上海市' },
        { date: '2023-01-03', name: '王五', address: '广州市' }
      ]
    };
  }
};
</script>

表格功能扩展

Element UI 的表格支持排序、筛选、分页等高级功能。

添加排序

<el-table-column prop="date" label="日期" sortable></el-table-column>

添加筛选

<el-table-column prop="name" label="姓名" :filters="[{ text: '张三', value: '张三' }]" :filter-method="filterHandler"></el-table-column>

添加分页

<template>
  <div>
    <el-table :data="pagedData" style="width: 100%">
      <!-- 列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      tableData: [...],
      pagedData: []
    };
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.updatePagedData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.updatePagedData();
    },
    updatePagedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.pagedData = this.tableData.slice(start, end);
    }
  },
  created() {
    this.updatePagedData();
  }
};
</script>

自定义列模板

通过插槽自定义列内容：

<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="handleEdit(scope.row)" size="mini">编辑</el-button>
    <el-button @click="handleDelete(scope.row)" size="mini" type="danger">删除</el-button>
  </template>
</el-table-column>

响应式表格

动态加载数据时，可通过 v-if 或 loading 属性控制加载状态：

<el-table :data="tableData" v-loading="isLoading">
  <!-- 列定义 -->
</el-table>

通过以上方法，可以快速实现功能丰富的表格，并根据需求灵活扩展。