el-tree极限踩坑，好离谱的下拉图标没变化的bug

最新推荐文章于 2024-09-13 18:23:26 发布

忙里偷闲的sin

最新推荐文章于 2024-09-13 18:23:26 发布

阅读量512

点赞数 7

文章标签： bug

本文链接：https://blog.csdn.net/qq_45635939/article/details/135757822

版权

文章描述了一个开发者在使用Vue的el-tree组件时遇到的问题，包括下拉滚动产生的bug、组件缓存导致的状态变化以及数据类型不匹配引发的getCheckedKeys方法失效。作者提到通过`ref`和`setCheckedKeys`操作，但类型不一致导致了问题。

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

先看bug，目前已解决
在这里插入图片描述页面下拉产生bug
然后我换个页面也是tree组件

好像是加了缓存一样，又好了，图片如下

然后刷新一下页面，又变成第一个图片的bug了

<el-dialog v-model="treeDialog.visible" :title="treeDialog.title">
    <div>
        <el-tree
            style="height: 300px; overflow-y: auto"
            ref="treeRef"
            :data="treeOptionsData"
            show-checkbox
            node-key="id"
            :props="{ label: 'label', children: 'children' }"
        />
        <div class="treeDialogBtn">
            <el-button @click="getCheckedKeys"
                >get by key</el-button
            >
            <el-button @click="resetChecked">reset</el-button>
        </div>
    </div>
</el-dialog>

// 数据是下面这个
const treeOptionsData = ref<OptionType[]>();
// 封装的如下
interface OptionType {
   /** 值 */
    id: string | number;
    /** 文本 */
    label: string;
    /** 子列表  */
    children?: OptionType[];
}

出现原因是
const treeRef = ref<InstanceType>();
贴一下我的重置和确认代码

const getCheckedKeys = () => {
    console.log(treeRef.value!.getCheckedKeys(false));
};
const resetChecked = () => {
    treeRef.value!.setCheckedKeys([], false);
};

因为要获取选中的，所以用了ref treeRef，但是我后端返回的类型和给的例子的类型不一致，导致一直没处理好，后端写前端真就不停踩坑，上面直接给个[]就行了