ElementUI中Tree组件兼容IE解决方案

更新时间：2021-08-21 v1.0

一、简介

     在软件开发初期阶段，经常会使用是市面上主流的浏览器进行功能开发，调试。为什么呢？ 因为市面上主流的浏览器对W3C组织制定的标准更友好，同时对开发者、用户的角度都是友好。所以，在开发过程中很少出现兼容问题，真好！！！

    IE（全称：Internet Explorer）浏览器是微软开发的一款用于互联网域名检索软件，同时也是Microsoft Internet Explorer/ Windows Internet Explorer (7、8、9、10、11版本）的统称。 于2016年，微软宣布停止对IE浏览器(8/9/10版本)的技术支持并建议用户统一更新至11或使用 Microsoft Edge浏览器。

基于IE浏览器的使用基数大，适用范围场景广主要是政府、学校，适用人群主要是部分特定人群。

   (1) 基于以下三个基本认识：

    第一，IE支持原生JavaScript脚本语言的语法规范；

    第二，IE对W3C部分标准兼容且不全兼容设计；

    第三，IE对于不兼容语法，不提示任何报错信息。（默认开发者已经具备IE浏览器语法知识）

  (2) 兼容IE的二个核心思考点：

    第一、是否提示报错信息，如果提示，则根据提示进行解决对应不兼容问题；

    第二、如果不提示，则思考该框架预定义语法IE是否兼容，通过部分代码删除进行分析；

    第三、如果是因为语法问题，则进行语法调整至IE能识别的语法。

二、IE兼容Element原理

    前端架构 Vue.js (2.x 最新版)  | (UI) Element (2.5.4最新版)

    原理一：基于Elment 是遵循CSS样式的标准的，而IE对CSS的部分样式也是兼容的，因此，可以分析出IE对Element (User Interface 简称 UI框架） 也是兼容。

   原理二：基于Elment在遵循CSS样式的标准下，也自定义的一部分样式，所以IE不兼容部分样式也是可能存在的。基于Element自定义样式是否被IE进行整合为标准，这是Elment开发团队做的事，理论上讲，应该通过一种解决方案兼容了。如果兼容了，则IE能识别，反之，则无法识别，且样式布局应该会使用IE已预定义好的样式呈现对应的元素及标签。

   原理三：IE浏览器的核心功能就是页面浏览器，用于检索网页(HTML 全称 Hypertext Markup Language) 并呈现的应用程序.

三、IE兼容Element方案

由于Element与Vue配合使用，Element是基于遵循ES6标准的Vue的语法且IE不支持ES6标准

<div class="custom-tree-container">

    <div class="block">

        <el-tree :data="list" node-key="id" :render-content = "renderContent">

        </el-tree>

    </div>

</div>


<script>
  let id = 1000; //注意:IE也不支持变量不提升标准.

  export default {

    data() { },  //该写法IE不支持,该成data:function(){ ... } 即可.

    methods: {
      //下列函数来自于官网
      renderContent(h, { node, data, store }) { 
      //改写：renderContent:function(h,data){...}                            
        return ();
      }
    }
  };
</script>

参考博客：

https://baike.baidu.com/item/Internet%20Explorer/1537769?fr=aladdin

https://element.faas.ele.me/#/zh-CN/component/tree

总结与收获

Element+Vue的组件组合模式，适用于市场、商务方面。

BootStrap+Jquery+JqGrid | HTML+CSS+JavaScript      

1.对于构建UI Framework的理解加深、IE浏览器所支持的基本语法及标准。

温馨提示：本篇博客不定时更新内容与修改博客，喜欢的博友可以收藏。