Vxe-Table表格插件的使用总结

1. 简介

VXE Table 是一个基于Vue的表格框架，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等。

VXE Table面向现代浏览器，高效的简洁 API 设计，模块化表格、按需加载、扩展接口，为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能。

官网[vxe-table v4 (vxetable.cn)]

2.安装

1.下载依赖包

npm install xe-utils vxe-table

2.全局注册

import VXETable from 'vxe-table' 
import 'vxe-table/lib/style.css'
Vue.use(VXETable)

3.使用

1.vxe-grid和vxe-pager的使用

<template>
  <!-- 表格+分页区域 -->
  <!-- 表格  columns:列配置；data：表格数据（与 loadData 行为一致，更新数据是不会重置状态);  resizable:启用列宽状态;  loading:	
表格是否显示加载中-->
  <div class="in-box">
    <vxe-grid
      ref="vxeGrid"
      resizable
      :columns="myColumns"
      :data="dataTable"
      :loading="showLoading"
    >
    </vxe-grid>
    <!-- 分页 -->
    <vxe-pager
      :current-page="tablePage.currentPage"
      :page-size="tablePage.pageSize"
      :total="tablePage.total"
      @page-change="handlePageChange"
    >
    </vxe-pager>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showLoading: true,
      myColumns: [
        { fixed: "left", title: "序号", field: "keyIndex", width: "100" },
        {
          fixed: "left",
          title: "操作",
          width: "180",
          //  插槽--可以自定义显示模板
          slots: {
            default: (rowObj) => {
              const { row, seq, data } = rowObj
              return [
                <p>
                  {
                    <button
                      onClick={() => this.handleReview(row)}
                      style="margin-right:10px"
                    >
                      查看详情
                    </button>
                  }
                  // 通过后端返回的数据状态判断什么情况下展示撤回按钮
                  {(row.invoiceStatus == 10 || row.invoiceStatus == 20) && (
                    <button onClick={() => this.handleRecall(row)}>撤回</button>
                  )}
                </p>,
              ]
            },
          },
        },
        { title: "申请时间", field: "applyTime" },
        { title: "发票单据号", field: "documentCode" },
        { title: "发票号码", field: "revenueNumber" },
        { title: "快递单号", field: "courierNumber" },
        { title: "受票方名称", field: "companyName" },
        { title: "开票金额", field: "invoiceAmount" },
        { title: "运费", field: "freightAmount" },
        { title: "税费", field: "taxation" },
        { fixed: "right", title: "发票状态", field: "invoiceStatusName" },
      ],
      dataTable: [],
      tablePage: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
    }
  },
  created() {
    this.initOtherList()
  },
  methods: {
    // 获取表格列表数据
    initOtherList() {
      const params = {
        ...this.query,
        invoiceStatus: this.currentActive,
        start: this.tablePage.currentPage,
        limit: 10,
        startApplyTime: this.query.startApplyTime
          ? this.query.startApplyTime
          : null,
        endApplyTime: this.query.endApplyTime ? this.query.endApplyTime : null,
      }

      util.apiPost(globalUrl.otherBillList, params).then((res) => {
        console.log("获取列表", res)
        if (res.code === 200) {
          this.showLoading = false // 关闭显示加载中
          this.dataTable = res.data
          this.tablePage.total = res.totalCount
          this.dataTable.forEach((item) => {
            // 通过this.$set给每一项中添加invoiceStatusName属性，并给其设置对应的值。 因为后端返回的invoiceStatus是一个数字，需要转成对应的字符
            this.$set(item, "invoiceStatusName", billStatus[item.invoiceStatus])
          })
        }
        this.showLoading = false
      })
    },
    // 分页页码值发生改变时的回调
    handlePageChange({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage
      this.tablePage.pageSize = pageSize
      this.initOtherList()
    },
  },
}
</script>

<style lang="less" scoped></style>