vue兩個數組對比,相同參數的不能點擊


      點擊添加多選款選中數據,添加成功入庫后,再次點擊展示列表,已經添加過的在列表中多選框禁止點擊添加

一,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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM