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: []
      },
    }
   }
}
相关推荐
luquinn6 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
烛阴7 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
啃火龙果的兔子7 小时前
js获取html元素并设置高度为100vh-键盘高度
javascript·html·计算机外设
wifi歪f12 小时前
🎉 Stenciljs,一个Web Components框架新体验
前端·javascript
不爱说话郭德纲12 小时前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化
知识分享小能手12 小时前
React学习教程,从入门到精通, React教程:构建你的第一个 React 应用(1)
前端·javascript·vue.js·学习·react.js·ajax·前端框架
李剑一12 小时前
别乱封装,你看出事儿了吧...
前端·vue.js
gongzemin13 小时前
Vue 项目权限管理 路由 按钮权限
前端·vue.js
Flame_13 小时前
一行代码搞定Vue3异步请求:vue3-request让状态管理从地狱到天堂
vue.js
FAIRY_STARS13 小时前
VUE3大屏自适应布局
vue.js