SOURCE

console 命令行工具 X clear

                    
>
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]
        },
        // mock数据,不要修改此函数
        // 从currentIndex位置,请求LEN个数据
        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>

本项目引用的自定义外部资源