模态框加载完毕设置tree的值

[wavesbig]

单独设置可以,模态框加载完毕调用不可以 代码如下

   handleOpenedAuthMenuList() {
      if (this.refMenuIds.length) {
        this.$nextTick(() => {
          if (this.$refs.treeSelect.$refs.tree) {
            this.$refs.treeSelect.$refs.tree.setCheckedKeys(this.refMenuIds)
            this.userForm.authMenuList = this.refMenuIds
          }
        })
      }
    },

[ayiaq1]

初始化的时候会赋值treeData. 为性能考虑treeData没有做watch 在异步请求之后,需要访问方法:

treeDataUpdateFun 树更新数据

this.post(url,postobj,response=>{
    this.$refs.treeSelect.treeDataUpdateFun(response.data);
});

[wavesbig]

您好,我这初始的时候就设置完值了,我是在模态框渲染完后设置树选中的值

[ayiaq1]

贴一下完整代码呢

[wavesbig]

   // html
 <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogAddUserVisible"
      width="600px"
      @closed="handleResetForm('userRuleForm')"
      @opened="handleOpenedAuthMenuList"
    >
      <el-form ref="userRuleForm" :model="userForm" :rules="userRules">
        <el-form-item
          label="角色名称"
          :label-width="formLabelWidth"
          prop="roleName"
        >
          <el-input
            v-model="userForm.roleName"
            autocomplete="off"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item
          label="是否启用"
          :label-width="formLabelWidth"
          prop="status"
        >
          <el-radio-group v-model="userForm.status">
            <el-radio label="1">开启</el-radio>
            <el-radio label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="备  注"
          :label-width="formLabelWidth"
          prop="roleDesc"
        >
          <el-input
            v-model="userForm.roleDesc"
            type="textarea"
            :rows="3"
            placeholder="请输入备注内容"
            style="width: 300px"
          />
        </el-form-item>
        <el-form-item
          label="权限设置"
          :label-width="formLabelWidth"
          prop="authMenuList"
        >
          <el-tree-select ref="treeSelect" v-model="userForm.authMenuList" :select-params="selectParams" :tree-params="treeParams" :styles="styles" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleResetForm('userRuleForm')">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSubmitForm('userRuleForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
   // methods
    handleOpenedAuthMenuList() {
      if (this.refMenuIds.length) {
        this.$nextTick(() => {
          if (this.$refs.treeSelect.$refs.tree) {
            this.$refs.treeSelect.$refs.tree.setCheckedKeys([...this.refMenuIds])
            this.userForm.authMenuList = [...this.refMenuIds]
            // this.$refs.treeSelect.$refs.tree.setCheckedKeys([1, 2, 3, 4, 5, 6])
            // this.userForm.authMenuList = [1, 2, 3, 4, 5, 6]
          }
        })
      }
    },
```js

[wavesbig]

你看看这样方便看吗

[ayiaq1]

能给一个在线或者精简版本么 这里我看不出你在dialog show之后 下拉树渲染周期

[ayiaq1]

在线demo,然后引入JS

https://unpkg.com/el-tree-select@3.1.7/dist/el-tree-select.umd.min.js

[wavesbig]

没事了,我已经找到问题了,谢谢

[ayiaq1]

close