Vue使用vxe-table

官网：https://vxetable.cn/v3/#/table/start/use

vxe-table是对element-ui进行了二次封装，基本样式也做了调整，并且把导出、打印等功能也集成进去了，就是纯前端的打印、导出，我之前也有写过前端实现打印、导出的博文，大家感兴趣也可看一下：Vue打印功能 ，纯前端导出Excel并修改样式。

这篇就介绍一下vxe-table的基本使用，其实和el-table差不多，使用起来基本一样

安装 

vxe-table依赖xe-utils库，我们这里选择按需导入，减小打包体积 

pnpm add xe-utils vxe-table@legacy
pnpm add babel-plugin-import -D

修改文件 .babelrc 或 babel.config.js 

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "vxe-table",
        "style": true // 样式是否也按需加载
      }
    ]
  ]
}

按需引入 

我们可以在src下新建plugn文件夹，下面的vxe-table.js按需引入vxe-table 

plugin/vxe-table.js 

import Vue from 'vue'
import XEUtils from 'xe-utils'
// 按需导入 vxeTable
import {
  // 核心
  VXETable,

  // 功能模块
  Icon,
  Filter,
  Menu,
  Edit,
  Export,
  Keyboard,
  Validator,
  Header,
  Footer,

  // 可选组件
  Column,
  Colgroup,
  Grid,
  Toolbar,
  Pager,
  Checkbox,
  CheckboxGroup,
  Radio,
  RadioGroup,
  RadioButton,
  Input,
  Textarea,
  Button,
  Modal,
  Tooltip,
  Form,
  FormItem,
  FormGather,
  Select,
  Optgroup,
  Option,
  Switch,
  List,
  Pulldown,

  // 表格
  Table
} from 'vxe-table'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'

// 按需加载的方式默认是不带国际化的，自定义国际化需要自行解析占位符 '{0}'，例如：
VXETable.setup({
  i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
})

// 表格功能
// Vue.use(Filter)
// .use(Edit)
// .use(Menu)
// .use(Export)
// .use(Keyboard)
// .use(Validator)

// 可选组件
Vue.use(Header)
  .use(Footer)
  .use(Icon)
  .use(Filter)
  .use(Edit)
  .use(Menu)
  .use(Export)
  .use(Keyboard)
  .use(Validator)

  // 可选组件
  .use(Column)
  .use(Colgroup)
  .use(Grid)
  .use(Toolbar)
  .use(Pager)
  .use(Checkbox)
  .use(CheckboxGroup)
  .use(Radio)
  .use(RadioGroup)
  .use(RadioButton)
  .use(Input)
  .use(Textarea)
  .use(Button)
  .use(Modal)
  .use(Tooltip)
  .use(Form)
  .use(FormItem)
  .use(FormGather)
  .use(Select)
  .use(Optgroup)
  .use(Option)
  .use(Switch)
  .use(List)
  .use(Pulldown)

  // 安装表格
  .use(Table)

// 给 vue 实例挂载内部对象，例如：
// Vue.prototype.$XModal = VXETable.modal
// Vue.prototype.$XPrint = VXETable.print
// Vue.prototype.$XSaveFile = VXETable.saveFile
// Vue.prototype.$XReadFile = VXETable.readFile

然后main.js引入该文件 

import './plugin/vxe-table'

使用 

<template>
  <div class="vxe-table">
    <vxe-toolbar :refresh="{ query: refreshList }" export print custom>
      <template #buttons>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="add()"
          >新建</el-button
        >
        <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="del()"
          :disabled="$refs.VXEForm && $refs.VXEForm.getCheckboxRecords().length === 0"
          plain
          >删除</el-button
        >
        <el-button
          type="danger"
          size="small"
          icon="el-icon-present"
          @click="resetSearch()"
          plain
          >重置</el-button
        >
      </template>
    </vxe-toolbar>
    <div style="height: calc(100% - 100px);">
      <vxe-table
        border="inner"
        auto-resize
        resizable
        :height="'auto'"
        :loading="loading"
        size="small"
        ref="VXETable"
        show-header-overflow
        show-overflow
        highlight-hover-row
        :menu-config="{}"
        :print-config="{}"
        :import-config="{}"
        :export-config="{}"
        @sort-change="sortChangeHandle"
        :sort-config="{ remote: true }"
        :expand-config="{ accordion: true, lazy: true }"
        :data="dataList"
        :checkbox-config="{}"
      >
        <vxe-column type="seq" width="40"></vxe-column>
        <vxe-column type="checkbox" width="40px"></vxe-column>
        <vxe-column field="contractName" title="合同名称"></vxe-column>
        <vxe-column field="company" title="单位名称"></vxe-column>
        <vxe-column field="bankName" title="开户行"></vxe-column>
        <vxe-column field="cardNumber" title="银行账户"></vxe-column>
        <vxe-column field="payAmount" title="付款金额"></vxe-column>
        <vxe-column field="payType" title="支付方式"></vxe-column>
        <vxe-column field="payDate" title="付款日期"></vxe-column>
        <vxe-column field="reason" title="付款原因"></vxe-column>
        <vxe-column field="remarks" title="付款备注"></vxe-column>
        <vxe-column
          fixed="right"
          align="center"
          width="200"
          title="操作"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-view"
              size="small"
              @click="view(scope.row)"
              >查看</el-button
            >
            <el-button
              type="text"
              icon="el-icon-view"
              size="small"
              @click="edit(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              icon="el-icon-view"
              size="small"
              @click="del(scope.row.id)"
              >删除</el-button
            >
          </template>
        </vxe-column>
      </vxe-table>
      <vxe-pager
        background
        size="small"
        :current-page="tablePage.currentPage"
        :page-size="tablePage.pageSize"
        :total="tablePage.total"
        :page-sizes="[10, 20, 100, 1000, { label: '全量数据', value: 1000000 }]"
        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
        @page-change="currentChangeHandle"
      >
      </vxe-pager>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      dataList: [
        {
          contractName: '测试合同',
          company: '测试单位名称',
          bankName: '测试开户行',
          cardNumber: '165489656589727',
          payAmount: '188990',
          payType: '银行转账',
          payDate: '1990-10-10',
          reason: '原因原因原因原因原因原因',
          remarks: '测试备注'
        }
      ],
      tablePage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orders: [],
      },
      dataListSelections: [],
    };
  },
  mounted() {},
  methods: {
    // 获取列表
    refreshList() {
      this.loading = true;
      this.$http({
        url: '/iot/wft/wftGate/list',
        method: 'get',
        params: {
          current: this.tablePage.currentPage,
          size: this.tablePage.pageSize,
          orders: this.tablePage.orders,
          contractId: this.curContractId,
          ...this.searchForm,
        }
      }).then(({ data }) => {
        this.dataList = data.records;
        this.tablePage.total = data.total;
        this.loading = false;
      });
    },
    // 查看
    view(row) {},
    // 修改
    edit(row) {},
    // 删除
    del(id) {
      let ids = id || this.$refs.VXETable.getCheckboxRecords().map((item) => item.id).join(",");
      this.$confirm(`确定删除所选项吗?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http({
          url: "/iot/wft/wftGate/delete",
          method: "delete",
          params: { ids },
        }).then(({ data }) => {
          if (data && data.success) {
            this.$message.success(data.msg);
            this.refreshList();
          }
          this.loading = false;
        });
      });
    },
    // 当前页
    currentChangeHandle({ currentPage, pageSize }) {
      this.tablePage.currentPage = currentPage;
      this.tablePage.pageSize = pageSize;
      this.refreshList();
    },
    // 排序
    sortChangeHandle(column) {
      this.tablePage.orders = [];
      if (column.order != null) {
        this.tablePage.orders.push({
          column: this.$utils.toLine(column.property),
          asc: column.order === "asc",
        });
      }
      this.refreshList();
    },
    // 重置
    resetSearch() {
      this.$refs.searchForm.resetFields();
      this.refreshList();
    },
  },
};
</script>
<style scoped>
.vxe-table {
  width: 100%;
  height: 100%;
}
</style>