0

我是 Vue.js 的初学者，我被困在这个问题上：

<span>Condition</span>
<el-select style="width: 94%;" v-model="condition[index+1]">
  <el-option label="Ambient" value="Ambient">Ambient</el-option>
  <el-option label="Frozen" value="Frozen">Frozen</el-option>
</el-select>
<h4>
  <el-checkbox v-model="check[index+1]" @change="selectAllPanels(index+1, item.id)">Select All</el-checkbox>
</h4>
<div class="card-content panels-category" v-for="(category, n) in panelsCategory[item.id]" :key="category.id" style="float: left">
  <div class="panel-category" v-if="searchList[item.id][n].length > 0">
    <el-checkbox v-model="checkAll[index+1][item.id][n]" @change="checkAllPanel(index+1, item.id, n)"  :label="category.id" :key="category.id">
      <h5 class="card-title">{{ category[0].panel_category }}</h5>
    </el-checkbox>
  </div>
  <div class="panels" v-for="panels in searchList[item.id][n]" :key="panels.id">     <!-- in panelsCategory[item.id][n]-->
    <!--<el-checkbox-group class="panels-name" v-model="selectedPanels[index+1][item.id]"  @change="handelAddSample(index+1)">-->
      <el-checkbox :checked="checkAll[index+1][item.id][n]" class="panels-name" v-model="selectedPanels[index+1][item.id]"  @change="handelAddSample()" :label="panels.id" :key="panels.id" >{{panels.reportable_name}}</el-checkbox>
      <el-popover class="panel-popover"
                  trigger="hover"
                  @show="getPanelTest(panels.id)"
                  placement="bottom">
        <el-button slot="reference" class="ti-help popover-help"></el-button>
        <slot>{{panelTest}}</slot>
      </el-popover>
    <!--</el-checkbox-group>-->
  </div>
  <div class="panels" v-if="searchList[item.id][n].length > 0" v-for="i in getPanelsLength(index+1, item.id, n)" ></div>
</div>

单击右侧的加号按钮->从下拉列表中单击某物->它显示新选项卡

因此，在这里，这些选项卡中出现了魔力：复选框无法正常工作，我的意思是在单击“全选”复选框时，应选中所有复选框，但这在单击一个子类别复选框之前不会发生（例如第三个孩子），但存储所选复选框的列表填充得很好。

我试过了this.$forceUpdate()，甚至this.$set()在点击全选和类别标题（蓝色背景的那些）调用的函数中，有人可以帮忙吗？

我试图在这个小提琴Here中重现它。

4

2 回答 2

0

问题似乎与复选框有关

<el-checkbox
  :checked="checkAll[index+1][item.id][n]"
  class="panels-name"
  v-model="selectedPanels[index+1][item.id]"
  @change="handelAddSample()"
  :label="panels.id" :key="panels.id"
>{{panels.reportable_name}}</el-checkbox>

此元素同时具有:checked并已v-model定义，这将竞争，更重要的是，您在静态数据上使用模型（更新 searchList，而不是 checkAll）。对于一个 element-ui，您只使用v-model，并通过checkAll而不是searchList.

<el-checkbox
  v-model="checkAll[index+1][item.id][n]"
  class="panels-name"
  @change="handelAddSample()"
  :label="panels.id" :key="panels.id"
>{{panels.reportable_name}}</el-checkbox>

您应该做的另一件事是在更新嵌套属性时使用 this.$set

  selectAllPanels(index, item) {
    if (this.check[index] === true) {
      this.$set(this.check, index, true) // <--- note use of $set here
    } else {
      this.$set(this.check, index, false) // <--- here
    }
    for (let i = 0; i <= this.panelsCategory[item].length; i++) {
        console.log(this.panelsCategory[item][i])
      if (this.panelsCategory[item][i] !== undefined && this.check[index]) {
        this.$set(this.checkAll[index][item], i, true) // <--- here
        this.checkAllPanel(index, item, i)
      } else {
        if (this.panelsCategory[item][i] !== undefined) {
          this.$set(this.checkAll[index][item], i, false) // <--- and here
          this.checkAllPanel(index, item, i)
        }
      }
    }
    //this.$forceUpdate()  // <--- then you don't need forceUpdate
  },
于 2018-08-23T17:07:44.233 回答
0 
<el-checkbox class="panels-name" 
  :value="!!selectedPanels[index+1][item.id].find(i=>i===panels.id)"
  @change="handelAddSample(index+1,item.id,panels.id)"
  :label="panels.id"
  :key="panels.id"
>{{panels.reportable_name}}
</el-checkbox>

绑定:value="!!selectedPanels[index+1][item.id].find(i=>i===panels.id)"，它起作用了。

只需将其添加到孩子

     handelAddSample(a,b,id) {
        let m = -1;
        if(!!this.selectedPanels[a][b].find((i,index)=>{if(i===id){m=index;return true}})){
            this.selectedPanels[a][b].splice(m,1); 
        }else {
            this.selectedPanels[a][b].push(id);
        }
        this.$forceUpdate()
      },

新演示

于 2018-08-24T09:35:51.790 回答