element ui中select下拉框动态添加，共用数据实现ID不重复选择

在业务实现上，碰到了这个问题，数据选择联动，而且选择的id不重复问题困扰好久，好在最后解决了，话不多说上代码：

<template>
    <div>
        <div>{{selectData}}</div>
        <div v-for="(item,index) in selectData" :key="index">
            <el-select class="select_css" v-model="item.Select" @change="select_chang">
                <el-option v-for="itm in filterOpData" :key="itm.id" :value="itm.id" :label="itm.name" :disabled="itm.disabled"></el-option>
            </el-select>
            <button @click="del(index)">删除</button>
        </div>
        <div style="margin-top:10px">
            <button @click="add">新增一条</button>
        </div>
    </div>
</template>

<script>
export default{
    data(){
        return{
            opData:[
                {name:'王毅',id:1},
                {name:'李二',id:2},
                {name:'张武',id:3},
                {name:'四平',id:4},
                {name:'吉林',id:5},
                {name:'天山',id:6},
                {name:'如来',id:7}
            ],
            selectData:[]
        }
    },
    computed:{
        filterOpData(){
            let getSels = []
            this.selectData.map(item =>{
                item.Select && getSels.push(item.Select)
            })
            return this.opData.filter(item => {
                getSels.includes(item.id) && (item.disabled=true)
                return true
            })
        },
        select_chang(){
            let getSels = []
            this.selectData.map(item => {
                item.Select && getSels.push(item.Select)
            })
            return this.opData.filter(item => {
                item.disabled=false
            // getSels.includes(item.id) && (item.disabled=false)
                return false
            })
        },
    },
    methods:{
        //添加一行
        add: function (){
            this.selectData.push({ Select:''});
        },
        //删除一行
        del: function(index){
            this.selectData.splice(index,1);
        },
    }
}
</script>