我的开发笔记

Appearance

深入浅出 vxe-table：打造高效灵活的表格组件 ​

前言 ​

在前端开发中，表格组件是一个非常常见且重要的功能。无论是数据展示、报表生成还是后台管理系统，表格都扮演着不可或缺的角色。今天，我们将深入探讨如何使用 vxe-table 这个强大的 Vue 表格组件库，来实现高效灵活的表格功能。

什么是 vxe-table？ ​

vxe-table 是一个基于 Vue.js 的表格组件库，它提供了丰富的功能和高度的可定制性。与其他表格组件相比，vxe-table 更加轻量、高效，并且支持大数据量渲染、虚拟滚动、复杂表头、多级表头等高级特性。

你可以在 vxe-table 官方文档 中找到更多详细信息和示例。

安装 vxe-table ​

首先，我们需要安装 vxe-table 和其依赖项 xe-utils。你可以使用 npm 或 yarn 进行安装：

bash
npm install xe-utils vxe-table
# 或者
yarn add xe-utils vxe-table

基本用法 ​

接下来，我们来看一个基本的示例，展示如何在 Vue 项目中使用 vxe-table。

创建 Vue 项目 ​

如果你还没有创建 Vue 项目，可以使用 Vue CLI 快速创建一个：

bash
vue create vxe-table-demo
cd vxe-table-demo

引入 vxe-table ​

在 main.js 中引入 vxe-table：

javascript
import { createApp } from "vue";
import App from "./App.vue";
import "vxe-table/lib/style.css";
import VXETable from "vxe-table";

const app = createApp(App);
app.use(VXETable);
app.mount("#app");

创建基础表格 ​

在 App.vue 中创建一个基础表格：

vue
<template>
  <div id="app">
    <vxe-table :data="tableData">
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
      <vxe-column field="gender" title="Gender"></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "John Doe", age: 28, gender: "Male" },
        { name: "Jane Smith", age: 22, gender: "Female" },
        { name: "Sam Johnson", age: 35, gender: "Male" },
      ],
    };
  },
};
</script>

<style>
#app {
  padding: 20px;
}
</style>

解释代码 ​

  • 模板部分：

    • 使用 <vxe-table> 组件创建表格，并通过 :data 属性绑定数据源。
    • 使用 <vxe-column> 组件定义表格列，每个列通过 field 属性指定数据字段，通过 title 属性指定列标题。

  • 脚本部分：

    • 定义 tableData 数据，其中包含一些初始的表格数据。

高级用法 ​

除了基本用法外，vxe-table 还提供了许多高级特性，如排序、筛选、分页、编辑等。下面我们来看几个常见的高级用法。

排序和筛选 ​

你可以通过设置 sortable 和 filters 属性来启用列的排序和筛选功能。

vue
<template>
  <div id="app">
    <vxe-table :data="tableData">
      <vxe-column field="name" title="Name" sortable></vxe-column>
      <vxe-column field="age" title="Age" sortable></vxe-column>
      <vxe-column
        field="gender"
        title="Gender"
        :filters="genderFilters"
        filter-render="{name: 'VxeSelect'}"
      ></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "John Doe", age: 28, gender: "Male" },
        { name: "Jane Smith", age: 22, gender: "Female" },
        { name: "Sam Johnson", age: 35, gender: "Male" },
      ],
      genderFilters: [
        { label: "Male", value: "Male" },
        { label: "Female", value: "Female" },
      ],
    };
  },
};
</script>

分页 ​

你可以通过结合 vxe-pager 组件来实现分页功能。

vue
<template>
  <div id="app">
    <vxe-table :data="currentPageData">
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
      <vxe-column field="gender" title="Gender"></vxe-column>
    </vxe-table>
    <vxe-pager
      :total="tableData.length"
      :page-size="pageSize"
      @current-change="handlePageChange"
    ></vxe-pager>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "John Doe", age: 28, gender: "Male" },
        { name: "Jane Smith", age: 22, gender: "Female" },
        { name: "Sam Johnson", age: 35, gender: "Male" },
        // 更多数据...
      ],
      currentPage: 1,
      pageSize: 10,
    };
  },
  computed: {
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    },
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
    },
  },
};
</script>

编辑 ​

你可以通过设置 editable 属性来启用单元格编辑功能。

vue
<template>
  <div id="app">
    <vxe-table
      :data="tableData"
      edit-config="{ trigger: 'click', mode: 'cell' }"
    >
      <vxe-column field="name" title="Name" editable></vxe-column>
      <vxe-column field="age" title="Age" editable></vxe-column>
      <vxe-column field="gender" title="Gender" editable></vxe-column>
    </vxe-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: "John Doe", age: 28, gender: "Male" },
        { name: "Jane Smith", age: 22, gender: "Female" },
        { name: "Sam Johnson", age: 35, gender: "Male" },
      ],
    };
  },
};
</script>

实战案例：员工管理系统 ​

接下来，我们通过一个实际案例来演示如何使用 vxe-table 构建一个简单的员工管理系统。

HTML 部分 ​

vue
<template>
  <div id="app">
    <h1>员工管理系统</h1>
    <vxe-table
      :data="employees"
      edit-config="{ trigger: 'click', mode: 'row' }"
    >
      <vxe-column type="checkbox" width="60"></vxe-column>
      <vxe-column field="name" title="姓名" editable></vxe-column>
      <vxe-column field="age" title="年龄" editable></vxe-column>
      <vxe-column field="position" title="职位" editable></vxe-column>
      <vxe-column field="salary" title="薪资" editable></vxe-column>
      <vxe-column title="操作" width="150">
        <template #default="{ row }">
          <button @click="deleteEmployee(row)">删除</button>
        </template>
      </vxe-column>
    </vxe-table>
    <button @click="addEmployee">添加员工</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      employees: [
        { name: "张三", age: 30, position: "工程师", salary: 8000 },
        { name: "李四", age: 25, position: "设计师", salary: 7000 },
        { name: "王五", age: 35, position: "产品经理", salary: 10000 },
      ],
    };
  },
  methods: {
    addEmployee() {
      this.employees.push({ name: "", age: "", position: "", salary: "" });
    },
    deleteEmployee(row) {
      const index = this.employees.indexOf(row);
      if (index > -1) {
        this.employees.splice(index, 1);
      }
    },
  },
};
</script>

<style>
#app {
  padding: 20px;
}
</style>

解释代码 ​

  • 模板部分：

    • 使用 <vxe-table> 组件创建表格，并通过 edit-config 属性启用行编辑模式。
    • 使用 <vxe-column> 组件定义表格列，其中包括复选框列、可编辑列和操作列。
    • 添加一个按钮，用于添加新员工。

  • 脚本部分：

    • 定义 employees 数据，其中包含一些初始的员工信息。
    • 定义 addEmployee 方法，用于添加新员工。
    • 定义 deleteEmployee 方法，用于删除员工。

使用 VitePress 构建

Copyright © 2024-present Long