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@legacypnpm 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'// 按需导入 vxeTableimport {  // 核心  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'

使用 

                    新建        删除        重置                                                                                                                                          查看            修改            删除                                          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();    },  },};.vxe-table {  width: 100%;  height: 100%;}