目录

Vue 实战自定义组件,可以删除和增加

RecommendFunction.vue

javascript 复制代码
<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>

父组件引用:

javascript 复制代码
 <RecommendFunction :data-list="form.dataList" :fruit-options="form.fruitOptions" />

export default {
  components: { RecommendFunction },
  data() {
    return {
      form: {
        fruitOptions: [
          { label: "苹果", value: "0" },
          { label: "香蕉", value: "1" }
        ],
        dataList: []
      },
    }
   }
}
本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
Dontla2 小时前
前端页面鼠标移动监控(鼠标运动、鼠标监控)鼠标节流处理、throttle、限制触发频率(setTimeout、clearInterval)
前端·javascript
再学一点就睡2 小时前
深拷贝与浅拷贝:代码世界里的永恒与瞬间
前端·javascript
CrimsonHu3 小时前
B站首页的 Banner 这么好看,我用原生 JS + 三大框架统统给你复刻一遍!
前端·javascript·css
Enti7c3 小时前
前端表单输入框验证
前端·javascript·jquery
拉不动的猪3 小时前
几种比较实用的指令举例
前端·javascript·面试
与妖为邻3 小时前
自动获取屏幕尺寸信息的html文件
前端·javascript·html
sunn。4 小时前
自定义组件触发饿了么表单校验
javascript·vue.js·elementui
烛阴4 小时前
Express入门必学三件套:路由、中间件、模板引擎全解析
javascript·后端·express
哟哟耶耶4 小时前
React-01React创建第一个项目(npm install -g create-react-app)
前端·javascript·react.js
Heidi__6 小时前
Vue 3 的响应式原理
前端·javascript·vue.js