console
var Main = {
data() {
return {
tableData: [],
gridOptions: {
border: true,
columns: [
{ type: 'seq', width: 60,fixed:'left' },
{ field: 'name', title: 'Name',width:300 },
{ field: 'sex', title: 'Sex',width:300 },
{ field: 'date', title: 'Date',width:300 },
{ field: 'address', title: 'Address',width:200 }
],
height:'100%',
'scroll-x': {
enabled: true,
gt: 2,
scrollToLeftOnChange: true,
},
'scroll-y': {
enabled: true,
gt: 30,
},
data: []
}
}
},
mounted() {
var list1 = []
var list2 = []
let temp = null
for (var index = 0; index < 1000; index++) {
const data = {
name: 'test' + index,
role: 'developer',
sex: 'Man',
date: '2019-05-01',
time: 1556677810888 + index * 500,
region: 'ShenZhen',
address: 'address abc' + index
}
if(index===500){
temp = data
}
list2.push(data)
}
this.tableData = list1
this.gridOptions.data = list2
this.$refs.treeRef.scrollToRow(temp)
setTimeout(()=>{
this.$refs.treeRef.scrollToRow(temp)
},1000)
}
};
var app = new Vue(Main).$mount('#app')
<script src="https://api.vxetable.cn/demo/api/npm/cdm/vue@2.6.14/dist/vue.min.js"></script>
<script src="https://api.vxetable.cn/demo/api/npm/cdm/xe-utils/dist/xe-utils.umd.min.js"></script>
<script src="https://api.vxetable.cn/demo/api/npm/cdm/vxe-table@legacy/lib/index.umd.js"></script>
<div id="app">
<template>
<div style="height:500px">
<p>Grid 演示</p>
<vxe-grid ref="treeRef" v-bind="gridOptions"></vxe-grid>
</div>
</template>
</div>
@import url("https://cdn.jsdelivr.net/npm/vxe-table@legacy/lib/style.css");