qimall/addons/CloudStock/backend/views/components/agent_price_edit.php

<style>
    .agent_price_edit {
        border: 1px solid #EBEEF5;
        padding: 10px;
    }

    .agent_price_edit .bg {
/*        height: 44px;*/
        padding: 10px;
        background: #f8f8f8;
    }

    .agent_price_edit .del-img {
        height: 20px;
        width: 20px;
        cursor: pointer;
    }

    .agent_price_edit .img-box {
        position: relative;
/*        height: 100px;*/
        width: 100px;
        margin-top: 8px;
        border: 1px solid #EBEEF5;
    }

    .agent_price_edit .attr-jt {
        background: #ffffff;
        width: 6px;
        height: 6px;
        border-top: 1px solid rgb(235, 238, 245);
        border-right: 1px solid #EBEEF5;
        transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        position: absolute;
        top: -5px;
    }

    .agent_price_edit .close {
        position: absolute;
        top: -4px;
        right: -4px;
        font-size: 16px;
        cursor: pointer;
    }

    .agent_price_edit .attr-list {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
        position: relative;
        cursor: move;
    }
    .label {
    	text-align: right;
    }
</style>
<template id="agent_price_edit">
    <div class="agent_price_edit">
        <el-form ref="ruleForm" label-width="" size="small">
            <div v-for="(group, i) in value" :key="i" style="margin-bottom: 16px">
                <el-form-item label="" prop="is_filter" label-width="0">
                    <div class="bg" style="display:flex;align-items: center;">
                        <el-input type="text" placeholder="请输入数量" v-model.trim="group.start_num" size="mini" style="width:150px;margin:0 10px">
                            <template slot="append">件</template>
                        </el-input>
                        <span class="label">~</span>
                        <el-input type="text" placeholder="请输入数量" v-model.trim="group.end_num" size="mini" style="width:150px;margin:0 10px">
                            <template slot="append">件</template>
                        </el-input>
                        <template>
                            <el-input type="text" placeholder="请输入金额" v-model.trim="group.price" size="mini" style="width:150px;margin:0 10px">
                                <template slot="append">元/件</template>
                            </el-input>
                        </template>
                        <el-button @click="deleteAttrGroup(i)" class="bg" style="border: none;" icon="el-icon-delete"></el-button>
                    </div>
                </el-form-item>
            </div>
            <div flex="dir:left cross:center" class="bg" v-if="isAddAttrGroups" style="padding: 10px;">
                <el-button @click="addAttrGroup()">添加价位</el-button>
                <span style="padding-left: 14px;color:#c9c9c9">注：最多可添加10个</span>
            </div>
        </el-form>
    </div>
</template>
<script>
    Vue.component('agent_price_edit', {
        template: '#agent_price_edit',
        props: {
            value: {
                type: Array,
                default: function () {
                    return [];
                }
            },
        },
        data() {
            return {
                attrGroupMaxCount: 10, //可添加最大数量
                isAddAttrGroups: true, //添加按钮是否显示
            };
        },
        watch: {

        },
        mounted() {
        },
        methods: {

            // 添加表单组
            addAttrGroup() {

            	var obj = {
                    start_num:0,
                    end_num:0,
                    price:0,
                }
                this.value.push(obj);
                // 限制添加的规格组
                if (this.value.length === this.attrGroupMaxCount) {
                    this.isAddAttrGroups = false;
                }
            },

            // 删除表单组
            deleteAttrGroup(index) {
                this.value.splice(index, 1);
                if (this.value.length < this.attrGroupMaxCount) {
                    this.isAddAttrGroups = true;
                }
                // this.makeAttrGroup();
            },
        }
    });
</script>