快捷導(dǎo)航

Vue?刪除和增加自定義組件實(shí)戰(zhàn)教程

更新時(shí)間：2024年08月03日 13:53:40 作者：呵呵噠(￣▽?zhuān)?"

Vue.js是一種流行的JavaScript框架,用于構(gòu)建交互式的Web應(yīng)用程序,在Vue.js中,我們可以通過(guò)動(dòng)態(tài)地增加和刪除組件來(lái)實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面的構(gòu)建和更新,本文介紹Vue?刪除和增加自定義組件實(shí)戰(zhàn)教程,感興趣的朋友一起看看吧

RecommendFunction.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="請(qǐng)輸入介紹" />
                    </el-form-item>
                    <el-form-item label="品類(lèi)" prop="fruitCatagory" style="margin-top: 10px;">
                        <div style="display: flex; align-items: center;">
                            <el-select v-model="item.fruitCatagory" placeholder="請(qǐng)選擇" 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="請(qǐng)輸入詳情" />
                        </div>
                    </el-form-item>
                    <el-form-item label="價(jià)格" prop="price" style="margin-top: 10px;">
                        <el-input v-model="item.price" placeholder="請(qǐng)輸入價(jià)格" 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: '此項(xiàng)為必填', trigger: 'blur' }],
                fruitCatagory: [{ required: true, message: '此項(xiàng)為必填', trigger: 'blur' }],
                price: [{ required: true, message: '此項(xiàng)為必填', 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: "蘋(píng)果", value: "0" },
          { label: "香蕉", value: "1" }
        ],
        dataList: []
      },
    }
   }
}

到此這篇關(guān)于Vue 刪除和增加自定義組件實(shí)戰(zhàn)教程的文章就介紹到這了,更多相關(guān)vue刪除和增加組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: