vue+element 动态添加一项下拉框

1.开发中有个实习生有一个需求，写了个demo记录下来了，东西不难，遇到同样的没头绪可以看看

 

 

<template>
    <div style="margin: 48px;">
        <el-table :data="list">
            <el-table-column label="偏远地区加价" min-width="300">
                <template #default="{row}">
                    <div style="display: flex;">
                        <el-input v-model="row.service" disabled style="width: 100px;"></el-input>
                        <span>元/单</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="使用区域" min-width="300">
                <template #default="{row}">{{ getArea(row.region) }}</template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="{$index}">
                    <el-button @click="openEdit($index)">查看</el-button>
                    <el-button @click="del($index)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-button @click="openAdd">添加</el-button>
        <div>{{ JSON.stringify(list) }}</div>
        <el-dialog :title="dialogTitle" width="480px" :visible.sync="visible">
            <el-form label-width="140px" size="small" :model="model" :rules="rules">
                <el-form-item label="加收费用：" prop="service">
                    <div style="display: flex;">
                        <el-input v-model="model.service" style="width: 100px;"></el-input>
                        <span>元/单</span>
                    </div>
                </el-form-item>
                <el-form-item label="偏远地区选择：" prop="region">
                    <div style="display: flex;justify-content: space-between;margin-bottom: 16px;" v-for="(i, index) in model.region" :key="index">
                        <el-select v-model="i.title" style="width: 150px;">
                            <el-option value="111"></el-option>
                            <el-option value="222"></el-option>
                            <el-option value="333"></el-option>
                            <el-option value="444"></el-option>
                            <el-option value="555"></el-option>
                        </el-select>
                        <el-button v-if="index == model.region.length - 1" @click="addArea">添加偏远地区</el-button>
                        <el-button v-else type="danger" @click="delArea(index)">删除偏远地区</el-button>
                    </div>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="confirm">确定</el-button>
                <el-button @click="visible = false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                list: [],
                visible: false,
                editIndex: null,
                model: {
                    service: "",
                    region: [{ title: "" }]
                },
                rules: {
                    service: { required: true, message: '加收费用不能为空！' },
                    region: { required: true, message: '地区选择不能为空！' }
                }
            }
        },
        methods: {
            getArea(region){
                return (region || []).map(v => v.title).join(";")
            },
            del(index){
                this.list.splice(index, 1)
            },
            openAdd(){
                this.editIndex = null;
                this.visible = true;
            },
            openEdit(index){
                this.editIndex = index;
                let row = this.list[index];
                this.model.service = row.service;
                this.model.region = (row.region || []).map(v => ({ title: v.title }))
                this.visible = true;
            },
            addArea(){
                this.model.region.push({ title: "" })
            },
            delArea(index){
                this.model.region.splice(index, 1)
            },
            confirm(){
                if(this.editIndex === null){
                    this.list.push(this.model);
                }
                else{
                    this.list.splice(this.editIndex, 1, this.model)
                }
                this.model = {
                    service: "",
                    region: [{ title: "" }]
                }
                this.visible = false;
            }
        },
        computed: {
            dialogTitle(){
                return this.isEdit ? "添加偏远地区加价" : "偏远地区加价详情"
            }
        }
    }
</script>

<style scoped>
    
</style>