SOURCE

console 命令行工具 X clear

                    
>
console
var Main = {

};
var Ctor = Vue.extend(Main);

var Table = {
    data() {
        return {
            tableData: [],
            columns: [
                {
                    width: '100', type: "index", title: 'No',
                }, {
                    width: '100', field: "name", title: "Name"
                }, {
                    width: '100', field: "sex", title: "Sex"
                }, {
                    width: '100', field: "date", title: "Date"
                }, {
                    width: '100', field: "role", title: "角色"
                }, {
                    width: '100', field: "time", title: "时间"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: "region", title: "区域"
                }, {
                    width: '100', field: 'address', title: '地址'
                }
            ],
            attrs: {
                border: true,
                highlightCurrentRow: true,
                stripe: true,
                resizable: true,
                showOverflow: true,
                autoResize: true,
                sortConfig: {
                    trigger: 'cell',
                },
                mouseConfig: { selected: true },
                keyboardConfig: {
                    isArrow: true,
                    isTab: true,
                    isEdit: true,
                },
                validConfig: {
                    message: 'inline',
                },
                showHeaderOverflow: true,
                editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
                optimization: {
                    scrollY: { gt: 50, oSize: 10, rSize: 30 },
                },
            }
        }
    },
    created() {
        var list = []
        for (var index = 0; index < 50; index++) {
            list.push({
                id: index + 10000,
                name: 'test' + index,
                role: 'developer',
                sex: 'Man',
                date: '2019-05-01',
                time: 1556677810888 + index * 500,
                region: 'ShenZhen',
                address: 'address abc' + index
            })
        }
        this.tableData = list
    },
    template: `<vxe-grid border :columns='columns' v-bind='attrs' height="500" :data="tableData">
				</vxe-grid>`
}
var Bar = {
    data() {
        return {

        }
    },
    template: `<span>测试</span>`
}
const routes = [
    { path: '/foo', component: Table },
    { path: '/bar', component: Bar }
]
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

new Ctor({
    router
}).$mount('#app')
<script src="//unpkg.com/vue">

</script>
<script src="//unpkg.com/xe-utils">

</script>
<script src="//unpkg.com/vxe-table/lib/index.js">

</script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js">

</script>

<div id="app">
	<template>
		<div>
			<p>
				<router-link to="/foo">Go to Foo</router-link>
				<router-link to="/bar">Go to Bar</router-link>
			</p>
			<keep-alive>
                <router-view>
			</router-view>
			</keep-alive>

		</div>
	</template>
</div>
@import url("//unpkg.com/vxe-table/lib/index.css");