Vue 删除和增加自定义组件实战教程

<template>
    <div>
        <div v-for="(item, index) in dataList" :key="index" class="data-item">
            <div class="group-row">
                <el-form ref="item" :model="item" label-width="100px" :rules="rules" label-position="top"
                    style="width: 90%">
                    <el-form-item label="介绍" prop="title">
                        <el-input v-model="item.title" placeholder="请输入介绍" />
                    </el-form-item>
                    <el-form-item label="品类" prop="fruitCatagory" style="margin-top: 10px;">
                        <div style="display: flex; align-items: center;">
                            <el-select v-model="item.fruitCatagory" placeholder="请选择" clearable
                                style="width: 200px; margin-right: 10px;" @change="handleNoRepeat">
                                <el-option v-for="option in getAvailableFruitCatagoryOptions(index)" :key="option.value"
                                    :label="option.label" :value="option.value" />
                            </el-select>
                            <el-input v-model="item.fruitDescription" placeholder="请输入详情" />
                        </div>
                    </el-form-item>
                    <el-form-item label="价格" prop="price" style="margin-top: 10px;">
                        <el-input v-model="item.price" placeholder="请输入价格" type="number" min="0" max="100" />
                    </el-form-item>
                </el-form>
                <el-button icon="el-icon-delete" type="text" style="margin-left: 10px;" @click="deleteItem(index)" />
            </div>
        </div>
        <div v-if="haveAbleChoice" class="data-btn" @click="addItem">
            <i class="el-icon-plus" style="font-weight: bold; margin-right:5px;" />增加组件
        </div>
    </div>
</template>
<script>
export default {
    name: 'RecommendationConfig',
    props: {
        fruitOptions: {
            type: Array,
            required: true,
            default: () => []
        },
        dataList: {
            type: Array,
            required: true
        },
    },
    data() {
        return {
            itemStruct: {
                title: '',
                fruitCatagory: '',
                fruitDescription: '',
                price: 50
            },
            rules: {
                title: [{ required: true, message: '此项为必填', trigger: 'blur' }],
                fruitCatagory: [{ required: true, message: '此项为必填', trigger: 'blur' }],
                price: [{ required: true, message: '此项为必填', trigger: 'blur' }]
            }
        }
    },
    computed: {
        haveAbleChoice() {
            const selectedTypes = this.dataList.map(item => item.fruitCatagory);
            return this.fruitOptions.some(option => !selectedTypes.includes(option.value));
        }
    },
    methods: {
        /* eslint-disable */
        getAvailableFruitCatagoryOptions(index) {
            const selectedTypes = this.dataList
                .map((item, idx) => (idx !== index ? item.fruitCatagory : null))
                .filter(type => type !== null);
            return this.fruitOptions.filter(option => !selectedTypes.includes(option.value));
        },
        handleNoRepeat() {
            this.$forceUpdate();
        },
        addItem() {
            const selectedTypes = this.dataList.map(item => item.fruitCatagory);
            const firstAvailableType = this.fruitOptions.find(option => !selectedTypes.includes(option.value));
            if (firstAvailableType) {
                const itemData = JSON.parse(JSON.stringify(this.itemStruct));
                itemData.fruitCatagory = firstAvailableType.value;
                this.dataList.push(itemData);
            }
        },
        deleteItem(index) {
            this.dataList.splice(index, 1);
        }
    }
}
</script>
<style scoped>
.data-btn {
    width: 140px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px dashed #d9d9d9;
    background: #ffffff;
    padding: 4px 15px;
}
.data-btn:hover {
    cursor: pointer;
    color: #409EFF;
    border: 1px dashed #409EFF;
}
.data-btn:active {
    /* background: #f2f0f7; */
    background: #e3f5f2;
}
.data-item {
    margin: 0 0 24px;
    background-color: #e3f5f2;
    padding: 16px;
    border-radius: 8px;
}
.group-row {
    display: flex;
    flex-direction: row;
    align-items: end;
}
</style>

 <RecommendFunction :data-list="form.dataList" :fruit-options="form.fruitOptions" />
export default {
  components: { RecommendFunction },
  data() {
    return {
      form: {
        fruitOptions: [
          { label: "苹果", value: "0" },
          { label: "香蕉", value: "1" }
        ],
        dataList: []
      },
    }
   }
}