console
const RowList = Vue.component('RowList', {
template:
`
<div>
RowList组件
</div>
`
})
const app = new Vue({
el: '#app',
components: { RowList },
template:
`
<div class="app">
<RowList
:dataList="dataList"
:columnList="columnList"
@onSelect="(e) => {this.onSelect(e)}"
@loadMore="(currentLen) => {this.loadMore(currentLen)}"
/>
<div>{{selectedIds}}</div>
</div>
`,
data: function () {
return {
dataList: [],
selectedArr: [],
columnList: [
{
index: 'id',
label: 'ID'
},
{
index: 'name',
label: '名称'
},
{
index: 'phone',
label: '手机号'
},
]
}
},
mounted() {
this.loadData()
},
computed: {
selectedIds() {
return this.selectedArr.map(e => e.id)
}
},
methods: {
onSelect(e) {
console.log(e)
this.selectedArr = e
},
loadMore(currentLen) {
this.loadData(currentLen)
},
async loadData(currentLen = 0) {
const res = await this.mockData(currentLen)
this.dataList = [...this.dataList, ...res]
},
mockData(currentIndex = 0, LEN = 100) {
return new Promise((resolve, reject) => {
try {
const res = []
for (let i = currentIndex; i < currentIndex + LEN; i++) {
res.push({
id: `id-${i}`,
name: `名称-${i}`,
phone: 13333333333 + i
})
}
resolve(res)
} catch (e) {
reject(e)
}
})
}
}
})
<div id="app"></div>