qimall/backend/views/components/common/com-pick-list.php

<style>
    .form-body {
        background-color: #fff;
        padding: 20px 50% 20px 0;
    }

</style>

<div id="com-pick-list" v-cloak>
    <el-table :data="list"  v-loading="listLoading" size="small" ref="singleTable">
        <el-table-column prop="id" label="选择ID" width="100">
            <template slot-scope="scope">
                <el-radio v-model="pick_value" :label="scope.row.id" @change="handleChange">{{ scope.row.id }}</el-radio>
            </template>
        </el-table-column>

        <el-table-column prop="title" label="标题">
            <template slot-scope="scope">
                <div>{{ scope.row.title }}</div>
            </template>
        </el-table-column>

        <el-table-column prop="created_at" label="时间">
            <template slot-scope="scope">
                <div>{{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}</div>
            </template>
        </el-table-column>
    </el-table>
    <div style="text-align: right;margin: 20px 0;">
        <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
    </div>
</div>

<script>
    Vue.component('com-pick-list', {
        template: '#com-pick-list',
        props: {
            type: {
                type: String,
                default: 'diy',// single|单个,multiple|多个
            },
        },
        data() {
            return {
                page: 1,
                pageCount: 0,
                listLoading: false,
                list: [],
                route: '',
                ruturn_value: '',
                pick_value: 0,
            };
        },
        created() {
            console.info(this.type,'type');
            this.loadData();
        },
        methods: {
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.loadData();
            },
            loadData() {
                this.listLoading = true;
                request({
                    params: {
                        r: 'mall/link/get-pick-list',
                        type: this.type,
                        page: self.page,
                    },
                    method: 'get',
                }).then(e => {
                    this.listLoading = false;
                    if (e.data.code === 0) {
                        this.list = e.data.data.list;
                        self.pageCount = e.data.data.page_count;
                    } else {
                        this.$message.error(e.data.msg);
                    }
                }).catch(e => {
                });
            },
            handleChange(val) {
                this.ruturn_value = this.route + val;
            }
        }
    });
</script>