vue两个数组对比，相同参数的不能点击

Posted 2021-01-25 陪伴者

      点击添加多选款选中数据，添加成功入库后，再次点击展示列表，已经添加过的在列表中多选框禁止点击添加

一，html    

<div class="table_box feicontainer">
                        <table>
                            <tr>
                                <th style="width:10%">检测标准编号</th>
                                <th style="width:20%">检测标准名称</th>
                                <th style="width:20%">说明</th>
                                <th style="width:5%">
                                    <label>
                                      <input type="checkbox" class="checkall"  v-model="checked" @click="checkedAll">
                                    </label>
                                </th>
                            </tr>
                            <tr v-for="(item,index) in starendnamelist">
                                <td>{{item.template_number}}</td>
                                <td>{{item.template_name}}</td>
                                <td>{{item.remark}}</td>
                                <td><input type="checkbox" v-model="checkedId" :disabled="item.isprohibit==true?true:false" :value="item"></td>
                            </tr>
                        </table>
   </div>

 

二，script     

<script>
     export default{
        name:‘‘,
        props:[],
        data(){
           return{
             checkedId:[],//选中信息
             checked:false,
             starendnamelist:‘‘
           }
        },
        mounted(){
           this.search();
        },
        methods:{
          
          search(){
                let _this = this;
                let json = _this.qs.stringify({
                    //给后台返的参数
                });
                this.$axios.post(‘调取的接口‘, json, res => {
                    this.starendnamelist = res.data.template;
                    this.copylist=res.data.check_template;
                    this.starendnamelist.forEach((item,index)=>{
                        this.$set(item,‘isprohibit‘,false)
                    })    
                    this.comparison(this.starendnamelist,this.copylist)
                });
            },
            comparison(arr,Newarr){
                for(let i = 0; i < arr.length; i++){
                    let item = arr[i];
                    for(let j = 0; j < Newarr.length; j++){
                        let items = Newarr[j]
                        if(item.template_id==items.template_id){
                            item.isprohibit=true;
                        }
                    }
                }
            },
             /**全选**/
            checkedAll(){  //全选 反选
                let _this = this;
                this.$nextTick(function(){
                    if(!_this.checked){
                        _this.checkedId = [];
                    }else{
                        _this.checkedId = [];
                        _this.starendnamelist.forEach(function(item,index){
                            _this.checkedId.push(item);
                        });
                    }
                })
            }

        }
     }
</script>

 

                                                                                                                                                                                                                    --------END