49 lines
1.4 KiB
Vue
49 lines
1.4 KiB
Vue
<template>
|
|
<tiny-grid ref="tinyTable" height="300">
|
|
<tiny-grid-column type="index" width="60"></tiny-grid-column>
|
|
<tiny-grid-column field="name" title="名称"></tiny-grid-column>
|
|
<tiny-grid-column field="city" title="地址"></tiny-grid-column>
|
|
<tiny-grid-column field="createdDate" title="创建日期" show-overflow></tiny-grid-column>
|
|
</tiny-grid>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { Grid, GridColumn } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyGrid: Grid,
|
|
TinyGridColumn: GridColumn
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
created() {
|
|
this.mockData()
|
|
},
|
|
methods: {
|
|
// 生成 1000 条模拟数据
|
|
mockData() {
|
|
setTimeout(() => {
|
|
const randomAlphabets = () => {
|
|
return Array.from({ length: Math.ceil(Math.random() * 10) })
|
|
.map(() => String.fromCharCode(65 + Math.floor(26 * Math.random())))
|
|
.join('')
|
|
}
|
|
|
|
const data = Array.from({ length: 1000 }).map((item, i) => {
|
|
return {
|
|
id: randomAlphabets() + i + 1,
|
|
name: randomAlphabets() + '科技YX公司',
|
|
city: ['福州', '深圳', '中山', '龙岩', '韶关', '黄冈', '赤壁', '厦门'][Math.floor(Math.random() * 8)],
|
|
createdDate: '2011-11-11 11:11:11'
|
|
}
|
|
})
|
|
|
|
this.$refs.tinyTable.loadData(data)
|
|
}, 200)
|
|
}
|
|
}
|
|
}
|
|
</script>
|