VXE Table-newbie

文章目录

在 Vue 中使用 VXE Table

在 Vue 中使用 VXE Table

VXE Table 是一个功能强大的表格组件，适用于 Vue 项目，提供了丰富的表格功能，如排序、分页、筛选、编辑等，非常适合用于展示和操作大量数据。以下是如何在 Vue 中集成和使用 VXE Table 的详细步骤。

1. 安装 `VXE Table`

首先需要安装 VXE Table，可以通过 npm 或 yarn 进行安装。

npm install vxe-table

或者

yarn add vxe-table

2. 全局引入 `VXE Table`

在项目中引入并注册 VXE Table 组件和样式。通常，这一步可以在 main.js 或 main.ts 文件中完成。

import Vue from 'vue';
import VxeTable from 'vxe-table';
import 'vxe-table/lib/index.css';

Vue.use(VxeTable);

3. 在组件中使用 `VXE Table`

在 Vue 组件中使用 VXE Table，首先在模板中添加表格，并通过 columns 和 data 属性来配置表格的列和数据。

<template>
  <vxe-table
    :columns="columns"
    :data="tableData"
    border
    stripe
  ></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { field: 'id', title: 'ID', width: 100 },
        { field: 'name', title: 'Name', width: 200 },
        { field: 'age', title: 'Age', width: 100 }
      ],
      tableData: [
        { id: 1, name: 'John Doe', age: 28 },
        { id: 2, name: 'Jane Smith', age: 34 },
        { id: 3, name: 'Sam Brown', age: 45 }
      ]
    };
  }
};
</script>

<style scoped>
/* 如果需要自定义表格样式，可以在此处进行修改 */
</style>

4. 配置表格列

在 columns 配置项中，可以定义每一列的属性，如字段名、标题、宽度、对齐方式等。

columns: [
  {
    field: 'id',
    title: 'ID',
    width: 100,
    align: 'center'  // 设置对齐方式
  },
  {
    field: 'name',
    title: 'Name',
    width: 200,
    sortable: true  // 开启排序功能
  },
  {
    field: 'age',
    title: 'Age',
    width: 100,
    sortable: true
  }
]

5. 表格功能配置

VXE Table 提供了丰富的功能配置，以下是一些常见功能的启用示例。

排序功能：通过 sortable 属性启用列的排序功能。

columns: [
  {
    field: 'name',
    title: 'Name',
    sortable: true
  }
]

分页功能：使用 vxe-pager 组件来实现分页。

<template>
  <div>
    <vxe-table
      :columns="columns"
      :data="tableData"
      :pager-config="pagerConfig"
    ></vxe-table>
    <vxe-pager
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      @page-change="handlePageChange"
    ></vxe-pager>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { field: 'id', title: 'ID' },
        { field: 'name', title: 'Name' },
        { field: 'age', title: 'Age' }
      ],
      tableData: [], // 这里通常会从服务器获取数据
      total: 100,  // 总数据量
      currentPage: 1, // 当前页
      pageSize: 10  // 每页条数
    };
  },
  methods: {
    handlePageChange({ currentPage, pageSize }) {
      this.currentPage = currentPage;
      this.pageSize = pageSize;
      // 根据分页信息请求新的数据
      this.fetchData();
    },
    fetchData() {
      // 模拟请求数据
      console.log(`请求数据：页码 ${this.currentPage}, 每页 ${this.pageSize} 条`);
    }
  }
};
</script>

编辑功能：启用单元格编辑功能。

<template>
  <vxe-table
    :columns="columns"
    :data="tableData"
    border
    stripe
    @cell-click="handleCellClick"
  ></vxe-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          field: 'id',
          title: 'ID',
          editable: true  // 启用编辑功能
        },
        {
          field: 'name',
          title: 'Name',
          editable: true
        },
        {
          field: 'age',
          title: 'Age',
          editable: true
        }
      ],
      tableData: [
        { id: 1, name: 'John Doe', age: 28 },
        { id: 2, name: 'Jane Smith', age: 34 },
        { id: 3, name: 'Sam Brown', age: 45 }
      ]
    };
  },
  methods: {
    handleCellClick({ row, column }) {
      console.log('点击单元格', row, column);
    }
  }
};
</script>

6. 自定义模板渲染

VXE Table 还允许使用自定义模板来渲染表格内容，可以在 slot 中自定义表格列的渲染。

<template>
  <vxe-table :columns="columns" :data="tableData">
    <template v-slot:default="{ row }">
      <div>{{ row.name }} - {{ row.age }}岁</div>
    </template>
  </vxe-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        { field: 'name', title: 'Name' },
        { field: 'age', title: 'Age' }
      ],
      tableData: [
        { name: 'John Doe', age: 28 },
        { name: 'Jane Smith', age: 34 },
        { name: 'Sam Brown', age: 45 }
      ]
    };
  }
};
</script>

7. 样式

VXE Table 提供了大量的内置样式，可以根据需要进行定制。若需要自定义表格的样式，可以通过类名来覆盖默认样式。

<style scoped>
.vxe-table {
  border-radius: 10px;
}
.vxe-table .vxe-header--row th {
  background-color: #f4f4f4;
  color: #333;
}
</style>

官方文档参考

更多详细配置和功能可以参考 VXE Table 的官方文档：

VXE Table 官方文档

总结

通过安装和配置 VXE Table，可以在 Vue 项目中轻松创建功能丰富的表格。VXE Table 支持丰富的功能和配置，如排序、分页、筛选、编辑、合并单元格等，可以非常方便地满足各种表格展示和操作需求。

付鹏篚

VXE Table