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");