element ui 兼容低版本浏览器

基于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；

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/m0_37780367/article/details/100520338
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 03:41:29
阅读 ( 901 )
分类：

element ui 兼容低版本浏览器

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看