element ui 兼容低版本浏览器

最新推荐文章于 2024-03-18 14:18:49 发布

菜鸟圈大当家

最新推荐文章于 2024-03-18 14:18:49 发布

阅读量1.3w

点赞数

分类专栏： vue ElementUI 浏览器兼容文章标签： vue 浏览器兼容 element ui

本文链接：https://blog.csdn.net/m0_37780367/article/details/100520338

版权

vue 同时被 3 个专栏收录

22 篇文章

订阅专栏

ElementUI

15 篇文章

订阅专栏

浏览器兼容

3 篇文章

订阅专栏

本文介绍如何调整Vue框架结合ElementUI的代码，使其能在低版本浏览器中正确显示，涉及代码片段修改，包括slot-scope使用方式、methods定义等，确保跨浏览器兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于ES6的用Vue框架element ui写的页面，如果当需要解决兼容低版本浏览器时，会遇到在低版本浏览器中不显示效果，页面一片空白，但控制台也不报错，而在高版本可以正常显示的情况。
低版本效果：

高版本效果：

代码片段：

<div id="app">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all>
            <span class="custom-tree-node" slot-scope="{node, data}">
                <span>
                    <img :src="data.type|showPic" v-if="data.type" style="height:15px;" />   {{ node.label }}
                </span>
            </span>
        </el-tree>
    </div>

改为：

<div id="app">
        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all>
            <span class="custom-tree-node" slot-scope="node">
                <span>
                    <img :src="node.data.type|showPic" v-if="node.data.type" style="height:15px;" />   {{ node.data.name }}
                </span>
            </span>
        </el-tree>
    </div>

methods: {
	handleNodeClick(data) {
		console.log(data);
        console.log(data.name)
   }   
}

改为：

methods: {
	handleNodeClick:function(data) {
		console.log(data);
        console.log(data.name)
   }   
}

修改点：
1、slot-scope="{node, data}"改为slot-scope="node"；
2、用到data的地方，比如:src="data.type|showPic" v-if="data.type"，全部改为:src="node.data.type|showPic" v-if="node.data.type"；
3、:props="defaultProps"去掉不去掉都可；
4、修改methods等语法，改为符合ES5；