最近在 el-dialog 中使用 el-checkbox-group 选项值为对象的时候 动态渲染选数据 视图不更新这个问题已经给折磨透了
数据不一样 但每次打开后的视图都不更新

在这里插入图片描述

我也是翻遍了很多问答 基本上给的方法都离不开以下这些方法

  1. 使用 this.$set()
  2. 使用 this.$froceUpdate()
  3. 使用 this.$nextTick(() => {})

但都没有实际的解决 遇到的问题
反复的排查之后确认了确实是数据有更新 仅仅只是 视图没有发生变化 觉得应该可以通过 “v-if” 来暴力解决问题(不推荐)

    <el-dialog :title="' 选择发布人'" :close-on-click-modal="false" append-to-body :visible.sync="visible"
      class="JNPF-dialog JNPF-dialog_center" lock-scroll width="600px">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="120px" label-position="right">
        <el-form-item label="发布人:" prop="publisherUserNames" v-if="visible">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group v-model="dataForm.publisherUserNames" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="item in userList" :label="item" :key="item.id">
              {{ item.realName }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSubmit()"> 取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading">
          确 定</el-button>
      </span>
    </el-dialog>

其他的数据处理操作按照正常的处理过程写就行了
后面也是有查阅到这位同志的帖子 vue2 element-ui el-checkbox 视图不更新问题
里面有很详细的解释说为什么会发生这样的问题(还是大佬厉害 得多学习) 确实可以这样做 但同样是不推荐 然而个人能力有限 并不能实现如他所示的效果 如果有同志有更好的方法 欢迎指正评论!

GitHub 加速计划 / vu / vue
105
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
9e887079 [skip ci] 1 年前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐