zoukankan      html  css  js  c++  java
  • vue两个数组对比,相同参数的不能点击

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

    一,HTML    

    <div class="table_box feicontainer">
                            <table>
                                <tr>
                                    <th style="10%">检测标准编号</th>
                                    <th style="20%">检测标准名称</th>
                                    <th style="20%">说明</th>
                                    <th style="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

  • 相关阅读:
    2017D 方格分割
    2017B 等差素数列
    完全平方数
    K-th Number(二分答案+尺取法判断)
    cf634div3
    performSelector: 与 dispatch_time 异同
    UIButton 的属性与方法
    Node.js 学习笔记三
    [2019杭电多校第一场][hdu6578]Blank(dp)
    [2019杭电多校第一场][hdu6582]Path(最短路&&最小割)
  • 原文地址:https://www.cnblogs.com/liujiajiablog/p/10072541.html
Copyright © 2011-2022 走看看