スパイクウィジェットチェックボックス全選択逆選択フォーム取得内容エラー処理


問題の説明


私の各チェックボックスはdata宣言の配列を利用してループしています.
そして私が全選択と逆選択をクリックしたときにdataのitemを操作してischeckプロパティページを変更してもこのプロパティで選択/非選択を表示します

発生したバグ


全選択を繰り返しクリックするとformフォームの保存をクリックして取得したフォームのvalueにチェックボックスの値が複数表示されます例えばチェックボックス自体が5つ繰り返しクリックします.全選択を5回繰り返しクリックすると、チェックボックスのvalueが25になります.itemループを利用したチェックボックスはcheckedの属性を外在的に変更したが、以前にレンダリングされたチェックボックスの値は依然として存在します.
 

解決策


axmlセクション

js部分
  formSubmit:function(e){
    const params = e.detail.value;
    delete params['members']
    params['members'] = this.data.items.filter((i)=> i.isCheck)
    console.info(params)
  },
  checkSingle:function(e){
    console.info(e)
    let ckval = e.detail.value
    let ckindex = e.currentTarget.dataset.ckindex
    let list = this.data.items.concat();
    list[ckindex]['isCheck'] = ckval;
    this.setData({
      items: list
    })
  },
  checkedAll:function (e) {
    console.info(e)
    let that = this
    let list = that.data.items.concat();
    list.map(o => {
      o.isCheck = e.detail.value;
    });
    that.setData({
      items: JSON.parse(JSON.stringify(list))
    })
  }

解決方法:
    1.formフォームのコミット時にチェックボックスに関するvalueを使用してdataでループする配列データを統一的に使用することを放棄する
    2.すべてを選択するか、単一のチェックボックスを選択するときにdataのitemを操作して効率を考え始めますここではインデックス値を利用してパフォーマンスを向上させます
    3. 単一点全選択dataの配列のオブジェクト選択ischeck=>true ischeck=>falseをキャンセル
    4. 最後にformフォームがvalueのチェックボックス情報を削除してdataのチェックボックス情報をformのvalueに割り当てるここでfilterフィルタを使用してischeckがfalseである場合