vue 自动添加栏与select过滤选择

<template>
    <div class="app-container">
        <div v-for="(item, index) in selectList" :key="index">
            <el-select v-model="item.fruits" style="width:200px">
                <el-option v-for="it in showFruitsList(item.fruits)" :value="it.value" :key="it.value">{{ it.label }}</el-option>
            </el-select>
            <el-input v-model="item.area" style="width:200px"></el-input>
            <el-button icon="md-add-circle" v-if="index == '0'" @click="listAdd()">加</el-button>
            <el-button icon="md-trash" v-if="index != '0'" @click="listDelete(item)">减</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectList: [{ fruits: "", area: "", }],
            fruitsList: [
                {
                    value: "香蕉",
                    label: "香蕉"
                },
                {
                    value: "葡萄",
                    label: "葡萄"
                },
                {
                    value: "芒果",
                    label: "芒果"
                },
                {
                    value: "柠檬",
                    label: "柠檬"
                }
            ],
        };
    },
    computed: {
        showFruitsList() {
            return (val) => {
                //讲option的显示数据进行深拷贝
                let newList = JSON.parse(JSON.stringify(this.fruitsList));
                //处理selectList数据，返回一个新数组arr
                //arr数组就相当于所有Select选中的数据集合（没有选中的为''，不影响判断），只要在这个集合里面，其他的下拉框就不应该有这个选项
                const arr = this.selectList.map(item => {
                    //将其格式{fruits：'柠檬'}变成['柠檬'],方便使用indexOf进行判断
                    return (item = item.fruits);
                });

                //过滤出newList里面需要显示的数据
                newList = newList.filter(item => {
                    //当前下拉框的选中的数据需要显示
                    //val就是当前下拉框选中的值
                    if (val == item.value) {
                        return item;
                    }
                    else {
                        //再判断在arr这个数组中是不是有这个数据，如果不在，说明是需要显示的
                        if (arr.indexOf(item.value) == -1) {
                            return item;
                        }
                    }
                });
                //返回Options显示数据
                return newList;
            };
        }
    },
    methods: {
        // 增加
        listAdd() {
            if (this.selectList.length < this.fruitsList.length) {
                this.selectList.push({
                    fruits: "",
                    area: "",
                });
            }
            else {
                alert("不能再加啦");
            }
        },
        // 减少
        listDelete(index) {
            this.selectList = this.selectList.filter(f => f.fruits != index.fruits)
        },
    },
}
</script>