SOURCE

var Main = {
    data () {
    return {
            tableData: [
                {
                    name:"名字1",
                    role:"角色1",
                    sex:"性别1",
                    rate:"等级1"
                }
            ],
            tableData1: [
                {
                    name:"名字2",
                    role:"角色2",
                    sex:"性别2",
                    rate:"等级2"
                }
            ],
            columns:[
                {
                    field:"name",
                    title:"名字",
                }
            ]
        }
    },
    created () {
        // this.tableData1 = window.MOCK_DATA_LIST.slice(0, 10)
    },
    methods: {
        toolbarCustomEvent(params){
            const visibleColumn = this.$refs.xTable.getColumns()
              switch (params.type) {
                case 'confirm': {
                  this.$XModal.message({ message: `点击了确认，显示为 ${visibleColumn.length} 列`, status: 'info' })
                  break
                }
                case 'reset': {
                  this.$XModal.message({ message: `点击了重置，显示为 ${visibleColumn.length} 列`, status: 'info' })
                  break
                }
                case 'close': {
                  this.$XModal.message({ message: `关闭了面板，显示为 ${visibleColumn.length} 列`, status: 'info' })
                  break
                }
              }
        },
    },
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')

<!-- <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>

<!-- 使用 cdn 引用方式需要注意是否锁定版本，默认指向最新版本 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script> -->
<script src="https://unpkg.com/vxe-table@2.9.26/lib/index.umd.js"></script>
<link rel="stylesheet" href=" https://unpkg.com/vxe-table@2.9.26/lib/index.css">
<div id="app">
  <template>
      <vxe-toolbar custom ></vxe-toolbar>
        <vxe-table
          border
          height="300"
          :export-config="{}"
          :data="tableData">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-colgroup title="分组信息">
            <vxe-table-colgroup title="基本信息">
              <vxe-table-column field="name" title="名字"></vxe-table-column>
              <vxe-table-column field="role" title="角色"></vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-column field="sex" title="性别"></vxe-table-column>
          </vxe-table-colgroup>
          <vxe-table-column field="age" title="年龄"""></vxe-table-column>
          <vxe-table-colgroup title="其他信息">
            <vxe-table-column field="rate" title="等级"></vxe-table-column>
          </vxe-table-colgroup>
        </vxe-table>
  </template>

  <template>
      <vxe-toolbar custom ></vxe-toolbar>
      <vxe-table
          border
          ref="xTable"
          height="300"
          :data="tableData1"
          @custom="toolbarCustomEvent">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="名字" :type="''">312321</vxe-table-column>
          <vxe-table-column field="role" title="角色"></vxe-table-column>
          <vxe-table-column field="sex" title="性别"></vxe-table-column>
          <vxe-table-column field="age" title="年龄"></vxe-table-column>
          <vxe-table-column field="rate" title="等级"></vxe-table-column>
          <!-- <vxe-table-column
            v-for="(item, index) in columns"
            :field="item.field"
            :title="item.title"
          ></vxe-table-column> -->
        </vxe-table>
  </template>
</div>

@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");