码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2018-12-05 20:52:00      阅读:157      评论:0      收藏:0      [点我收藏+]

标签:disabled   选中   val   UNC   export   ret   func   _id   false   

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

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

 

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

标签:disabled   选中   val   UNC   export   ret   func   _id   false   

原文地址:https://www.cnblogs.com/liujiajiablog/p/10072541.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!