vue.js - elementUI 我通过removeTag这个方法，改变了checkedKeys得值，但是页面上勾选状态为什么没变化???

Question

<el-select class="dimensions" @remove-tag="removeTag" v-model="checkedDimension" multiple placeholder="请选择">            <el-option>                <el-tree                    :data="dimensionList"                    show-checkbox                    node-key="id"                    @check="getValue"                    default-expand-all                    v-model="checkedKeys"                    :current-node-key="checkedKeys"                    :default-checked-keys="checkedKeys"                    :props="defaultProps">                </el-tree>            </el-option>        </el-select>

我通过removeTag这个方法，改变了checkedKeys得值，但是页面上勾选状态为什么没变化啊

Answer 1

官网setCheckedNodes方法可用 已解决

Answer 2

首先，从你提供的代码和问题描述来看，你正在使用 Element UI 的 <el-select> 和 <el-tree> 组件来创建一个多选的下拉列表。你通过 removeTag 方法改变了 checkedKeys 的值，但是页面上的勾选状态没有变化。

问题可能出在几个地方：

1. 双向数据绑定：请确保你正确地绑定了 v-model。在 Element UI 中，v-model 用于双向绑定数据。如果 checkedKeys 的值没有被正确地更新，那么页面的显示状态也不会改变。
2. removeTag 方法：请检查 removeTag 方法是否正确地更新了 checkedKeys。这个方法应该从 checkedKeys 中移除对应的值。
3. 组件更新：在 Vue 中，如果你要改变一个已经渲染的元素的状态，你需要确保这个状态的变化能够触发组件的重新渲染。你可以通过添加一个 watch 来观察 checkedKeys 的变化，并确保它确实被改变了。
4. Vue 的响应式原理：Vue 的响应式原理要求你不能直接改变一个被 v-model 绑定的数组的元素，而应该使用 Vue 提供的方法（如 splice）来改变数组。你需要检查 removeTag 方法是否遵循了这个规则。

你可以尝试以下代码来调试这个问题：

<template>  <el-select class="dimensions" @remove-tag="removeTag" v-model="checkedDimension" multiple placeholder="请选择">    <el-option v-for="item in dimensionList" :key="item.id">      {{ item.label }}    </el-option>  </el-select></template><script>export default {  data() {    return {      dimensionList: [        { id: 1, label: '选项1' },        { id: 2, label: '选项2' },        // ... 其他选项 ...      ],      checkedDimension: [],      checkedKeys: []    };  },  methods: {    removeTag(node, index) {      const id = node.data.id;      const indexToRemove = this.checkedKeys.indexOf(id);      if (indexToRemove !== -1) {        this.$set(this.checkedKeys, indexToRemove, null); // 使用 $set 来确保数组的变化能够被 Vue 检测到      }    }  }};</script>

这段代码中的 removeTag 方法使用了 Vue 的 $set 方法来改变 checkedKeys 数组中的元素，这样可以确保数组的变化能够被 Vue 检测到，并触发组件的重新渲染。