vue 表格数据变化时 el-checkbox-group v-model 绑定数据为空选中框数据默认展示的上一次的数据

最新推荐文章于 2024-08-08 10:59:35 发布

h_l_614

最新推荐文章于 2024-08-08 10:59:35 发布

阅读量722

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/h_l_614/article/details/135285886

版权

文章讨论了在Vue项目中，当el-checkbox-group的v-model绑定值变为null或undefined时，复选框显示上一次有值的问题。通过设置默认值为空数组，解决了视图不更新的问题。前端代码展示了如何修复这一bug。

摘要由CSDN通过智能技术生成

文章目录

问题说明

表格中数据变化时 el-checkbox-group v-model 绑定数据为空选中框数据默认展示的上一次的数据；

原因定位：

有根据 vue2 element-ui el-checkbox 视图不更新问题这个进行设置一个变更变量刷新视图，发现空数据复选框还是展示的上一次的有值的效果，这个问题和视图不更新还是有区别，有值的数据下拉视图是有更新，只有空值的时候还是展示上一次的值；

想是否因为绑定的值为 undefined 导致，因为之后空的数据才有问题，后面进行了处理一下，复选框绑定的变量为 undefined 的都赋值空数组[]，bug修复；

前端代码

  <el-table :data="tableData">
    <el-table-column type="selection" width="32" align="center"> </el-table-column>
    <el-table-column prop="index" label="序号" align="center" width="60" />
    <el-table-column label="多选" align="center" min-width="150">
      <template slot-scope="{ row }">
        <el-select multiple size="mini" v-model="row.list1" placeholder="请选择">
          <div>
            <el-checkbox label="全选" :indeterminate="isIndeterminate" v-model="isCheckAll" @change="handleCheckAll(row)">
            </el-checkbox>
          </div>
          <el-checkbox-group v-model="row.list1">
            <el-option v-for="item in list1Ops" :key="item.code" :label="item.name" :value="item.code">
              <el-checkbox :label="item.code" onclick="return false;">{{ item.name }}</el-checkbox>
            </el-option>
          </el-checkbox-group>
        </el-select>
      </template>
    </el-table-column>
  </el-table>