var Main = {
data() {
return {
loading: false,
tableData: [],
columns: [],
}
},
created () {
this.loadList(600)
/* this.loading = true
setTimeout(() => {
var list = []
for(var index = 0; index < 10000; index++){
list.push({
name: 'test' + index,
sex: 'Man',
date: '2019-05-01'
})
}
const startTime = Date.now()
this.tableData = list
this.loading = false
this.$nextTick(() => {
console.log(`渲染完成 ${Date.now() - startTime} 毫秒`)
})
}, 300) */
},
mounted() {
console.log('mounted')
this.$nextTick(() => {
//console.log(this.$refs.xTable)
// window.vm = this.$refs.xTable
// console.log(this.$refs.xTable.triggerCheckAllEvent)
// 大数据的全选 会卡顿的问题
// 超过5k还是会卡顿
/* const $xTable = this.$refs.xTable
this.$refs.xTable.triggerCheckAllEvent = (e, value) => {
console.log('triggerCheckAllEvent', value)
$xTable.setAllCheckboxRow(value);
} */
const xGrid = this.$refs.xGrid
const columns = [
{
type: 'checkbox',
width: 60
},
{
// title: '序号',
type: 'seq',
// fixed: 'left',
width: 100
},
{
title: 'Name',
field: 'name',
width: 100
},
{
title: 'sex',
field: 'Sex',
width: 200
},
{
title: 'rate',
field: 'Rate',
width: 200
},
{
title: 'region',
field: 'region',
width: 100
},
{
title: 'time',
field: 'time',
width: 200
},
{
title: 'Address',
field: 'address',
width: 300
},
{
title: 'createTime',
field: 'createTime',
width: 200
},
{
title: 'attr1',
field: 'attr1',
width: 200
},
{
title: 'attr2',
field: 'attr2',
width: 200
},
{
title: 'attr3',
field: 'attr3',
width: 200
},
{
title: 'attr4',
field: 'attr4',
width: 200
},
{
title: 'attr5',
field: 'attr5',
width: 200
},
{
title: 'attr6',
field: 'attr6',
width: 200
},
{
title: 'attr7',
field: 'attr7',
width: 200
},
{
title: 'attr8',
field: 'attr8',
width: 200
},
{
title: 'attr9',
field: 'attr9',
width: 200
},
{
title: 'attr10',
field: 'attr10',
width: 200
},
{
title: 'age',
field: 'age',
width: 200
},
]
this.columns = columns
// xGrid.loadColumn(columns)
// xGrid.reloadColumn(columns)
})
},
methods: {
changeColumns() {
const xGrid = this.$refs.xGrid
const columns = [
{
type: 'checkbox',
width: 60
},
{
// title: '序号',
type: 'seq',
// fixed: 'left',
width: 100
},
{
title: 'sex 1644' + new Date().getTime(),
field: 'Sex' + new Date().getTime(),
width: 200
},
{
title: 'Name',
field: 'name',
width: 100
},
]
this.columns = columns
const xTable = this.$refs.xTable
if (!xTable) return
xTable.reloadColumn(columns)
},
sortChange({
column, property,
order , sortBy, sortList, $event
}) {
/* const filed = property
const sort = column.sortBy
console.log('property', property)
console.log('sort', sort)
console.log('order', order)
let sortField = ''
if (typeof column.sortable === "string") {
sortField = column.sortable
} else if (typeof column.sortable === "string") {
sortField = camelCaseToUnderScoreCase(column.sortable)
} else {
sortField = camelCaseToUnderScoreCase(sort)
} */
// this.loadList(600)
this.tableData = data
},
checkboxAll(data) {
console.log('checkboxAll')
// console.log('checkboxAll', JSON.stringify(data))
return
},
setCheckbox() {
// const xTable = this.$refs.xTable
// xTable.setCheckboxRow(this.tableData, true)
},
loadList (size) {
this.loading = true
this.mockList(size).then(data => {
this.loading = false
this.tableData = Object.freeze(data)
const xGrid = this.$refs.xGrid
xGrid.reloadData(this.tableData)
// 使用函数式加载,阻断 vue 对大数据的监听
const xTable = this.$refs.xTable
if (!xTable) return
const startTime = Date.now()
if (xTable) {
this.loading = false
this.tableData = Object.freeze(data)
xTable.refreshScroll();
console.log(xTable.getScroll())
/* this.$refs.xTable.reloadData(data).then(() => {
//this.$XModal.message({ content: `渲染 ${size} 行,用时 ${Date.now() - startTime}毫秒`, status: 'info' })
this.loading = false
xTable.refreshScroll();
}) */
const xGrid = this.$refs.xGrid
xGrid.reloadData(this.tableData)
}
})
},
mockList (size) {
return new Promise(resolve => {
const list = []
for (let index = 0; index < size; index++) {
list.push({
id: index,
name: `名称${index}`,
checked: false,
sex: '0',
num: 123,
age: Math.random(),
num2: 234,
rate: 3,
address: 'shenzhen'
})
}
resolve(list)
})
},
getSelectEvent () {
let selectRecords = this.$refs.xTable.getCheckboxRecords()
this.$XModal.alert(selectRecords.length)
}
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vxe-table@3.3.1"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vxe-table@3.6.11"></script>
<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新@@asdfs 版本 -->
<!-- 使用 cdn 引用方式需要注意是否锁定版本,默认指向最新版本 -->
<!-- <script src="https://unpkg.com/vxe-table@2.10.13/lib/index.umd.js"></script>
<link rel="stylesheet" href=" https://unpkg.com/vxe-table@2.10.13/lib/index.css"> -->
<!-- <script src="https://unpkg.com/vxe-table@3.1.1/lib/index.umd.js"></script>
<link rel="stylesheet" href=" https://unpkg.com/vxe-table@3.1.1/lib/index.css"> -->
<!-- <script src="https://unpkg.com/vxe-table@2.9.26/lib/index.umd.js"></script>
<link rel="stylesheet" href=" https://unpkg.com/vxe-table@2.9.26/lib/index.css"> -->
<div id="app">
<template>
<div>
<!-- <vxe-table show-overflow height="400" :loading="loading" :data="tableData">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column field="name" title="Name"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
<vxe-column field="date" title="Date"></vxe-column>
</vxe-table> -->
<vxe-button @click="changeColumns()">列</vxe-button>
<p> vxe-grid </p>
<vxe-grid
border
resizable
show-overflow
show-header-overflow
highlight-hover-row
highlight-current-row
ref="xGrid"
height="300"
:columns="columns"
:loading="loading"
:toolbar-config="{slots: {buttons: 'toolbar_buttons'}}"
:checkbox-config="{checkField: 'checked' }">
</vxe-grid>
<vxe-toolbar>
<template #buttons>
<vxe-button @click="loadList(3000)">3k条</vxe-button>
<vxe-button @click="loadList(5000)">5k条</vxe-button>
<vxe-button @click="loadList(10000)">1w条</vxe-button>
<vxe-button @click="loadList(50000)">5w条</vxe-button>
<vxe-button @click="loadList(100000)">10w条</vxe-button>
<vxe-button @click="loadList(200000)">20w条</vxe-button>
<vxe-button @click="$refs.xTable.setAllCheckboxRow(true)">所有选中</vxe-button>
<vxe-button @click="setCheckbox">设置选中</vxe-button>
<vxe-button @click="$refs.xTable.clearCheckboxRow()">清除选中</vxe-button>
<vxe-button @click="getSelectEvent">获取选中</vxe-button>
</template>
</vxe-toolbar>
<!-- fixed="right" :data="tableData" -->
<p> vxe-table </p>
<vxe-table
border
:data="tableData"
resizable
show-overflow
row-key="id"
row-id="id"
show-header-overflow
highlight-hover-row
highlight-current-row
ref="xTable"
height="300"
:export-config="{}"
:loading="loading"
:checkbox-config="{reserve:true}"
:scroll-x=" {
gt: 10,
oSize: 10
}"
:checkbox-config="{checkField: 'checked'}"
@sort-change="sortChange"
@checkbox-all="checkboxAll">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column type="seq" width="100" ></vxe-table-column>
<vxe-table-column field="name" title="Name" sortable width="200"></vxe-table-column>
<vxe-table-column field="sex" title="Sex" width="200"></vxe-table-column>
<vxe-table-column field="rate" title="Rate" width="200"></vxe-table-column>
<vxe-table-column field="region" title="Region" width="200"></vxe-table-column>
<vxe-table-column field="time" title="Time" width="200"></vxe-table-column>
<vxe-table-column field="address" title="Address" width="300"></vxe-table-column>
<vxe-table-column field="updateTime" title="UpdateTime" width="200"></vxe-table-column>
<vxe-table-column field="createTime" title="CreateTime" width="200"></vxe-table-column>
<vxe-table-column field="attr1" title="Attr1" width="200"></vxe-table-column>
<vxe-table-column field="attr2" title="Attr2" width="200"></vxe-table-column>
<vxe-table-column field="attr3" title="Attr3" width="200"></vxe-table-column>
<vxe-table-column field="attr4" title="Attr4" width="200"></vxe-table-column>
<vxe-table-column field="attr5" title="Attr5" width="200"></vxe-table-column>
<vxe-table-column field="attr6" title="Attr6" width="200"></vxe-table-column>
<vxe-table-column field="attr7" title="Attr7" width="200"></vxe-table-column>
<vxe-table-column field="attr8" title="Attr8" width="200"></vxe-table-column>
<vxe-table-column field="attr9" title="Attr9" width="200"></vxe-table-column>
<vxe-table-column field="attr10" title="Attr10" width="200"></vxe-table-column>
<vxe-table-column field="age" title="Age" width="200" sortable></vxe-table-column>
</vxe-table>
</div>
<!-- <vxe-table
height="300"
border
resizable
show-overflow
:data="tableData"
:edit-config="{trigger: 'click', mode: 'cell'}">
<vxe-column type="seq" width="60"></vxe-column>
<vxe-column type="expand" width="60">
<template #content="{ row, rowIndex }">
<ul class="expand-form">
<li>
<span class="title">Name:</span>
<span class="content">
<vxe-input v-model="row.name"></vxe-input>
</span>
</li>
<li>
<span class="title">Sex:</span>
<span class="content">
<vxe-input v-model="row.sex"></vxe-input>
</span>
</li>
<li>
<span class="title">Age:</span>
<span class="content">
<vxe-input v-model="row.age"></vxe-input>
</span>
</li>
</ul>
</template>
</vxe-column>
<vxe-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-column>
<vxe-column field="sex" title="Sex" :edit-render="{name: 'input'}"></vxe-column>
<vxe-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-column>
</vxe-table> -->
</template>
</div>
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");