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；

element ui 兼容低版本浏览器相关推荐

vue 检测ie版本_Vue2+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案
React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案参考文章: (1)React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 (2)https://www.cnbl ...
React 项目兼容低版本浏览器
兼容低版本浏览器真的是让人头大,不过现在好在有框架鱼插件的运用,让我们轻松的兼容低版本浏览器,本文中以 DvaJS Cli 举例下载 react-app-polyfill 和 core-js 插件 ...
解决vue项目在ie浏览器中无法显示的问题，兼容低版本浏览器问题
解决vue项目在ie浏览器中无法显示的问题,兼容低版本浏览器问题 1.在csdn中找到了一下解决方案,但与本项目略有不同 vue项目兼容ie浏览器的问题:在其他浏览器显示都是正常的,在ie11下显示空 ...
vue3.0 + vite2.0+如何兼容低版本浏览器
这里写自定义目录标题一.问题二.解决三.解决方案四.打包预览一.问题在使用vue3.2和vite2 开发一个移动端或者钉钉端 H5 微服务 ios app内置浏览器打开没问题安卓 app ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
vite如何兼容低版本浏览器
一.问题在使用vue3.2和vite2.0+开发一个移动端H5,测试时发现很多低版本的安卓手机浏览器出现白屏的现象,而ios机型基本上是好的,原因是很多低版本浏览器并不支持原生ESM导入的方式,下面 ...
vue3+vite +element-plus+tailwindcss兼容低版本浏览器（uc）
部分问题 uc浏览器 rgb支持不全如rgb(0 0 0 /30%) 这种写法不支持 tailwindcss v3 部分样式在低版本下也不支持 uc浏览器对于 tailwindcss boxSha ...
使用umi打包项目兼容低版本浏览器如safari，chrome等
umi.js 中有运算符 Safari和低版本Chrome报错,参考 umijs.org 文档,配置正确的 targets 在umirc.js中配置targets 2.1.0+ 配置浏览器最低版本,会 ...

element ui 兼容低版本浏览器

element ui 兼容低版本浏览器相关推荐

最新文章

热门文章