console
function guess() {
let num = parseInt(Math.random() * 6 + 1)
return new Promise((resolve, reject) => {
resolve()
reject()
/* if (num > 3) {
console.log('大');
resolve('then中的大')
console.log('大2');
} else {
console.log('小');
reject('then中的小')
console.log('小2');
}
console.log('开始啦1');
setTimeout(() => {
resolve(11111)
console.log(123);
}, 000);
console.log('开始啦2');
setTimeout(() => {
console.log(66666666);
}, 2000); */
})
}
var Main = {
data() {
return {
tableData: [{
name: 'test1',
sex: '男',
date: '2019-08',
children: [
{
name: 'test2',
sex: '女',
date: '2019-08',
children: [
{
name: 'test3',
sex: '男',
date: '2019-08',
},
{
name: 'test11',
sex: '男',
date: '2019-08',
}
]
},
{
name: 'test7',
sex: '女',
date: '2019-08',
children: [
{
name: 'test9',
sex: '男',
date: '2019-08',
}
]
}
]
},
{
name: 'test4',
sex: '男',
date: '2019-08',
children: [
{
name: 'test5',
sex: '女',
date: '2019-08',
},
{
name: 'test15',
sex: '女',
date: '2019-08',
}
]
}],
data1: [{
name: 'test1',
sex: '男',
date: '2019-08',
children: [
{
name: 'test2',
sex: '女',
date: '2019-08',
children: [
{
name: 'test3',
sex: '男',
date: '2019-08',
},
{
name: 'test11',
sex: '男',
date: '2019-08',
}
]
},
{
name: 'test7',
sex: '女',
date: '2019-08',
children: [
{
name: 'test9',
sex: '男',
date: '2019-08',
}
]
}
]
},
{
name: 'test4',
sex: '男',
date: '2019-08',
children: [
{
name: 'test5',
sex: '女',
date: '2019-08',
},
{
name: 'test15',
sex: '女',
date: '2019-08',
}
]
}],
data2: [{
name: 'A2_test1xx',
sex: '男',
date: '2019-08',
},{
name: 'A2_test1',
sex: '男',
date: '2019-08',
children: [
{
name: 'A2_test2',
sex: '女',
date: '2019-08',
children: [
{
name: 'A2_test3',
sex: '男',
date: '2019-08',
},
{
name: 'A2_test11',
sex: '男',
date: '2019-08',
}
]
},
{
name: 'A2_test7',
sex: '女',
date: '2019-08',
children: [
{
name: 'A2_test9',
sex: '男',
date: '2019-08',
}
]
}
]
},
{
name: 'A2_test4',
sex: '男',
date: '2019-08',
children: [
{
name: 'A2_test5',
sex: '女',
date: '2019-08',
},
{
name: 'A2_test15',
sex: '女',
date: '2019-08',
}
]
}]
}
},
methods: {
async goPage(index) {
if (index === 1) {
this.tableData = this.data1
} else {
console.log('xxxx')
const a= await guess()
console.log('124124', a)
this.tableData = this.data2
}
},
reset() {
console.log(this.$refs.table.getCheckboxReserveRecords())
this.tableData = []
setTimeout(() => {
this.tableData = this.data2
}, 2000)
},
clearCheckbox() {
this.$refs.table.clearCheckboxRow()
},
handleCheckboxReserveRow (row, checked) {
// 源码 table内的方法
const { checkboxReserveRowMap, checkboxOpts } = this
if (checkboxOpts.reserve) {
const rowid = getRowid(this, row)
if (checked) {
checkboxReserveRowMap[rowid] = row
} else if (checkboxReserveRowMap[rowid]) {
delete checkboxReserveRowMap[rowid]
}
}
},
}
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app')
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>
<div id="app">
<template>
<p>
<vxe-button size="small" content="1"
@click="goPage(1)"></vxe-button>
<vxe-button size="small" content="2"
@click="goPage(2)"></vxe-button>
<vxe-button size="small" content="Reset"
@click="reset"></vxe-button>
<vxe-button size="small" content="clearCheckbox"
@click="clearCheckbox"></vxe-button>
</p>
<div>
<vxe-table
ref="table"
row-id="name"
:data="tableData"
:checkbox-config="{reserve: true}"
:tree-config="{children: 'children', indent: 0, reserve: true, expandAll: true }">
<vxe-table-column type="checkbox" width="60"></vxe-table-column>
<vxe-table-column type="seq"></vxe-table-column>
<vxe-table-column field="name" title="Name" tree-node></vxe-table-column>
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="date" title="Date"></vxe-table-column>
</vxe-table>
</div>
</template>
</div>
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");