列表的特殊新增删除

<template>
    <el-card class="box-card-zone">
        <div class="box-card-zone-title">
            <span>{{ msg }}</span>
            <el-button type="text" icon="el-icon-plus" style="margin-left: 43%;" @click="addZone">添加分区</el-button>
        </div>
        <div class="box-card-zone-contain">
            <el-row :gutter="30">
                <el-col :span="16">
                    <div class="card-zone-contain">
                        <div class="card-zone-item" v-for="(item, index) in zoneList" :key="index">
                            <span> {{ item.index == 0 ? " LPZ 0B " : ` LPZ ${item.index}` }}</span>
                            <img :src="item.imgUrl" width="20" height="20" alt="" @click="deleteZone(item, index)">
                        </div>
                    </div>
                </el-col>
                <el-col :span="8" class="right-zone-div">
                    <img src="@/assets/svg/u1517.png" alt="" class="right-zone-img ">
                </el-col>
            </el-row>
        </div>
        <div>
            <el-button type="primary" style="float:right;margin: 20px;" @click="next">下一步</el-button>
            <el-button type="primary" style="float:right;margin: 20px;" @click="backBudding">上一步</el-button>
        </div>
        <!-- 添加分区 -->
        <!--   <el-dialog title="添加分区" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="审批人">
                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog> -->
    </el-card>
</template>

<script>
import { getZoneList, updateZone } from "@/api/count/zone";
export default {
    data() {
        //可以请求后台接口获取数据
        return {
            msg: "雷电防护区",
            dialogVisible: false,
            zoneList: [
                {
                    index: 0,
                    imgUrl: require("@/assets/svg/u1514.png"),
                },
                {
                    index: 1,
                    imgUrl: require("@/assets/svg/u1514.png"),
                },
                {
                    index: 2,
                    imgUrl: require("@/assets/svg/u1514.png"),
                },
                {
                    index: 4,
                    imgUrl: require("@/assets/svg/u1514.png"),
                },
                {
                    index: 5,
                    imgUrl: require("@/assets/svg/u1514.png"),
                },
            ]
        }
    },
    watch: {},
    props: ['chooseObjectId'],
    computed: {},
    components: {},
    mounted() { },
    methods: {

        addZone() {
            let loseValue = '';
            const sorted = [...this.zoneList].sort((a, b) => a.index - b.index); // 对数组进行按id排序
            loseValue = sorted.findIndex((item, index) => index !== sorted[index].index);
            if (loseValue) {
                this.zoneList.push({
                    index: loseValue,
                    imgUrl: require("@/assets/svg/u1514.png"),
                })
            } else {
                this.zoneList.push({
                    index: this.zoneList.length,
                    imgUrl: require("@/assets/svg/u1514.png"),
                })
            }
            this.zoneList = [...this.zoneList].sort((a, b) => a.index - b.index);
        },
        deleteZone(val, index) {
            console.log(val, index, '删除值');
            this.$confirm(`'此操作将永久删除'${val.id}'该文件, 是否继续?'`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.zoneList.splice(index, 1);
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    }
}
</script>

<style  lang="scss" scoped>
.box-card-zone {
    width: 94%;
    margin: 0 auto;
}

.box-card-zone-title {
    span {
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
        color: #333333;
        display: inline-block;
        margin: 30px 0px 20px 9%;
    }

    ::v-deep .el-button--text {
        font-size: 16px !important;

    }
}


.box-card-zone-contain {
    width: 100%;
    margin: 0 auto;

    ::v-deep .el-col-16 {
        padding: 0 !important;
        height: 500px;
        // border: 1px solid rgba(215, 215, 215, 1);
    }
}

.card-zone-contain {
    width: 80%;
    height: 500px;
    margin-left: 15%;
    border: 1px solid #d7d7d7;
}

.card-zone-item {
    // width: 552px;
    height: 40px;
    background: inherit;
    background-color: rgba(242, 242, 242, 1);
    box-sizing: border-box;
    border: 1px solid rgba(215, 215, 215, 1);
    border-radius: 4px;

    span {
        line-height: 40px;
        margin: 20px;
    }

    img {
        float: right;
        margin: 5px;
    }
}

.right-zone-div {
    // width: 100%;
    /*background: #f2f2f2;*/
    // display: flex;
    justify-content: center;
    align-items: center;

    .right-zone-img {
        width: 100%;
        /* 设置图片宽度为容器宽度的百分百 */
        height: auto;
        /* 根据图片比例自动调整高度 */
    }
}
</style>