在vue2.6项目中拓展集成vxe-table组件教程

环境：vue2.6

1. 安装xe-utils vxe-table

npm install xe-utils vxe-table

注： xe-utils是vxe-table的依赖环境，需要一并安装。

2.添加main.js

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

      Vue.use(VXETable)

注： 部分人安装时可能会出现像下图这样的阴影情况，这里没事，请不要删除。

3.构筑vxe-table组件

创建如下图目录：在components包下创建hxlh-table包，然后在创建hxlh-table.vue文件。

hxlh-table.vue文件的内容：

<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
  <div class="hxlh-table">
    <vxe-grid
      ref="vxeTable"
      :show-header-overflow="true"
      :show-overflow="showOverflow"
      :stripe="true"
      :border="true"
      :show-footer="showfooter"
      header-align="center"
      highlight-hover-column
      highlight-hover-row
      resizable
      :loading="loading"
      :pager-config="tablePage"
      :form-config="tableForm"
      :columns="columns"
      :data.sync="data"
      :checkbox-config="checkboxConfig"
      :height="height"
      :max-height="maxHeight"
      :toolbar="toolbar"
      :reload-data="reloadData"
      :footer-method="footerMethod"
      :footer-cell-class-name="footerCellClassName"
      @sort-change="sortChange"
      @page-change="pagerChange"
      @form-submit="findList"
      @checkbox-change="checkChange"
      @checkbox-all="checkChangeall"
    >
      <template v-slot:buttons>
        <slot />
      </template>
    </vxe-grid>
  </div>
</template>

<script>

export default {
  name: 'HxlhTable',
  props: {
    /* table 参数*/
    showOverflow: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    columns: {
      type: Array,
      default: () => {
        return []
      }
    },
    showfooter: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    toolbar: {
      type: Object,
      default: () => {
        return {
          id: 'khjgz',
          zoom: true,
          resizable: {
            storage: true
          },
          custom: {
            storage: true
          },
          slots: {
            buttons: 'buttons'
          }
        }
      }
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    page: {
      type: Object,
      default: function() {
        return null
      }
    },
    checkboxConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    maxHeight: {
      type: String,
      default: () => {
        return ''
      }
    },
    height: {
      type: String,
      default: () => {
        return ''
      }
    },
    reloadData: {
      type: Function,
      default: () => {
        return {}
      }
    },
    footerCellClassName: {
      type: Function,
      default: () => {
        return {}
      }
    },
    mxTableFootData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      tableForm: {}
    }
  },
  computed: {
    tablePage() {
      if (!this.page) {
        return
      }
      return {
        total: this.page.total,
        currentPage: this.page.current,
        pageSize: this.page.size,
        align: 'left',
        pageSizes: [10, 20, 50, 100, 500],
        layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
        perfect: true
      }
    },
    footData() {
      return this.mxTableFootData
    }
  },

  methods: {
    pagerChange({ type, currentPage, pageSize }) {
      if (type == 'current') {
        this.$emit('changePageNo', currentPage)
      } else if (type == 'size') {
        this.$emit('changePageSize', pageSize)
      }
    },
    findList() {
    },
    sortChange({ column, property, order }) {
      this.$emit('sortTable', property, order)
    },
    checkChange(info) {
      const { records, checked, row, rowIndex } = info
      this.$emit('on-checkbox', { records, rowIndex, checked })
    },
    checkChangeall(info) {
      const { records, checked, row } = info
      this.$emit('on-checkbox', { records, rowIndex: null, checked })
    },
    footerMethod({ columns, data }) {
      this.$emit('footerMethod', { columns, data })
      return this.$store.state.hxlhTableFootData
    },
    handleSum(list, field) {
      var total = 0
      for (var index = 0; index < list.length; index++) {
        total += Number(list[index][field] || 0)
      }
      return total
    },
    // 在值发生改变时更新表尾合计
    updateFooter(params) {
      const xTable = this.$refs.vxeTable
      xTable.updateFooter()
    },
    // 取消复选框选择
    clearCheckboxRow() {
      const xTable = this.$refs.vxeTable
      xTable.clearCheckboxRow()
    }
  }
}
</script>

<style scoped lang="less">

</style>

<style lang="less">
  .hxlh-table .vxe-toolbar .vxe-tools--operate {
    margin-top: -23px;
  }

  .hxlh-table .vxe-toolbar {
    min-height: 52px;
    height: auto;
  }

  .vxe-table .vxe-footer--column.col-red {
    color: red;
  }

</style>

注： 这里为什么要去构筑组件呢，是因为方面我们项目中直接导入这个构筑好的组件去使用，这样可以提高项目表格结构的统一性，也便于管理所有表格的默认状态，初始状态与功能。

4.页面使用

在页面上到组件并使用即可。
导入：

import HxlhTable from '@/components/hxlh-table/hxlh-table'
//--------
components: {HxlhTable},

完整代码：

<template>
  <div id="view">
    <el-card style="width: 100%" class="box-card">
      <div slot="header" class="clearfix">
        <span><b>表格展示</b></span>
      </div>
      <div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
        <hxlh-table
          style="width: 100%"
          :columns="columns"
          :data="tableData"
          :loading="loading"
          :page="page"
        >
          <!--查询条件-->
          <el-form ref="queryForm" style="width: 100%" inline>
            <el-form-item label="接口名" style="float: left" class="form_btn ">
              <el-input v-model="selectItem.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item style="float: right" class="form_btn ">
              <el-button icon="el-icon-search" @click="alert('暂时无法搜索')">搜索</el-button>
            </el-form-item>
          </el-form>
        </hxlh-table>
      </div>
    </el-card>
  </div>
</template>

<script>
  import HxlhTable from '@/components/hxlh-table/hxlh-table'

  export default {
    name: 'dashboard',
    components: {HxlhTable},
    data() {
      return {
        //搜索使用组件
        selectItem: {
          name: '',
        },
        // 表格-项目所有数据
        tableData: [{
          code:'111',
          name:'张三',
          sex:'男'
        },{
          code:'222',
          name:'李四',
          sex:'男'
        },{
          code:'333',
          name:'王五',
          sex:'男'
        },{
          code:'444',
          name:'赵六',
          sex:'女'
        }
        ],
        // 表格配置
        columns: [
          {type: 'seq', title: '序号', width: 60},
          {
            title: '编号',
            field: 'code'
          },
          {
            title: '名称',
            field: 'name'
          },
          {
            title: '性别',
            field: 'sex'
          },
        ],
        // 表格缓冲
        loading: false,
        /* 分页属性*/
        page: {
          total: 4,
          current: 1,
          size: 10
        }
      }
    },
    mounted() {
    },
    methods: {

    }
  }
</script>

<style scoped="scoped">
  #view {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
  }

  .box-card {
    width: 480px;
  }
</style>

效果：

注： 项目中如没有less-loader 会报错提示需要安装less-loader，使用npm install安装上即可。

到这里就可以正常使用了，另外分享一下官方API文档：https://xuliangzhan.gitee.io/vxe-table/#/table/start/use

本教程是我在项目中边集成边写的，绝对保证了真实性可用性。部分地方写的不到位的欢迎指出，蟹蟹。

如果觉得有帮助的话给个免费的点赞吧，Thanks♪(･ω･)ﾉ