SOURCE

// 这里不能使用ES5语法，通过window对像进行模拟，与真实场景不同
const $gridManager = window.GridManager.default;

let allData = [];
// 模拟统一获取数据
const setAllData = function(tableNum, dataNum) {
    allData = [];
    for (let i = 0; i<= tableNum; i++) {
        const data = [];
        for(let j=0;j<dataNum;j++){
            data.push({
                "id": i,
                "name": `test-${i}`,
                "age": "28",
                "createDate": "2015-03-12",
                "info": "野生前端程序"
            });
        }
        allData.push(data);
    }
}
// 模拟的一个promise请求
const getBlogList = function(index) {
    const data = allData[index] || [];
    return new Promise((resolve, reject) => {
        resolve({
            data,
            totals: data.length
        });
    });
};

const getTableOptions = tableNum => {
    const list = [];
    for(let i=0;i <tableNum;i++){
        list.push({
            supportRemind: true,
            gridManagerName: 'test' + i + new Date().getTime(),
            height: '200px',
            supportAjaxPage: true,
            ajaxData: () => {
                return getBlogList(i);
            },
            // ajaxData: {
            //     data: allData[i] || []
            // },
            ajaxType: 'POST',
            supportMenu: true,
            query: {test: 22},
            pageSize: 30,
            emptyTemplate: settings => {
                const emptyText = settings.query.title ? '搜索结果为空' : '这个Vue表格, 什么数据也没有';
                return `<section style="text-align: center">${emptyText}</section>`;
            },
            columnData: [
                {
					key: 'name',
					remind: 'the username',
					sorting: 'up',
					width: '200px',
					text: 'username'
				},{
					key: 'age',
					remind: 'the age',
					sorting: '',
					width: '200px',
					text: 'age'
				},{
					key: 'info',
					remind: 'the info',
					sorting: '',
					text: 'info'
				},{
                    key: 'createDate',
                    text: '创建时间',
                    remind: 'the createDate',
                    sorting: 'down',
                    width: '200px',
                    fixed: 'right'
                },{
					key: 'operation',
					remind: '修改创建时间',
					sorting: '',
					width: '130px',
					text: '修改创建时间',
                    align: 'center',
                    fixed: 'right',
					template: function(operation, rowObject){
						return `<span class="plugin-action">修改</span>`;
					}
				}
            ]
        });
    }
    return list; 
}
let now = Date.now();
const app = new Vue({
    el: '#app',
    data: {
        // 表单数据
        formData: {
            tableNum: 2,
            dataNum: 1
        },

        // GM所需参数
        tableList: null
    },
    created: function () {
        // 初始全部数据
        setAllData(this.formData.tableNum, this.formData.dataNum);

        // 初始全部配置项
        this.tableList = getTableOptions(this.formData.tableNum);
        // console.log('setAllData', allData)
    },
    methods: {
        // 测试vue下的GM事件
        editRow: function (row, index) {
            row.title = row.title + ' (编辑于' + new Date().toLocaleDateString() +') ';
            row.lastDate = new Date().getTime();
            $gridManager.updateRowData('test', 'id', row);
        },
        // 事件: 操作
        actionAlert: function() {
            alert('操作栏th是由vue模板渲染的');
        },
        // 事件: 搜索
        onSearch() {
            setAllData(this.formData.tableNum, this.formData.dataNum);

            this.tableList = [];
            // 初始全部配置项, 解决vue中数据更新问题
            setTimeout(() => {
                this.tableList = getTableOptions(this.formData.tableNum);
            });
        },

        // 事件: 重置
        onReset: function () {
            this.formData.tableNum = 1;
            this.formData.dataNum = 1;
        }
    }
});

<div id="app" style="min-width:800px;height: 100%">
    <section class="search-area">
        <div class="sa-ele">
            <label class="se-title">表格数:</label>
            <input class="se-con" v-model="formData.tableNum"/>
        </div>
        <div class="sa-ele">
            <label class="se-title">行数:</label>
            <input class="se-con" v-model="formData.dataNum"/>
        </div>
        <div class="sa-ele">
            <button class="search-action" @click="onSearch()">搜索</button>
            <button class="reset-action" @click="onReset()">重置</button>
        </div>
    </section>
    <section class="grid-main">
        <div v-if="tableList" style="height: 100%" v-for="(option, index) in tableList">
            <grid-manager v-bind:option="option" key="option.gridManagerName"></grid-manager>
        </div>
    </section>
</div>

html, body{
    width: 100%;
    height: 100%;
    overflow-x:hidden;
    margin: 0;
    padding: 0;
}
* {
    box-sizing: border-box;
}
table .plugin-action{
    display: inline-block;
    color: steelblue;
    margin-right: 10px;
    cursor: pointer;
    text-decoration: none;
}
table .plugin-action:hover{
    text-decoration: underline;
}
.search-area{
    height: 50px;
    padding: 10px 20px;
    border: 1px solid #ccc;
    background: #efefef;
    margin: 0 10px 15px 10px;
}
.search-area .sa-ele{
    display: inline-block;
    margin-right: 20px;
    font-size: 12px;
}
.search-area .sa-ele .se-title{
    display: inline-block;
    margin-right: 10px;
}
.search-area .sa-ele .se-con{
    display: inline-block;
    width:180px;
    height: 24px;
    border: 1px solid #ccc;
    padding: 0 4px;
    line-height: 24px;
}
.search-area .sa-ele .search-action, .search-area .sa-ele .reset-action{
    display: inline-block;
    width:80px;
    height: 26px;
    border: 1px solid #ccc;
    background: #e8e8e8;
    padding: 0 4px;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    margin-right: 10px;
}
.search-area .sa-ele .search-action:hover, .search-area .sa-ele .reset-action:hover{
    opacity: 0.7;
}

.grid-main {
    margin: 10px;
    overflow: auto;
}
.grid-main >div{
    margin-bottom: 14px;
}