这里写图片描述

代码如下

"<el-tree "+

                " :data=\"treeData\"  "+

                " render-after-expand "+

                " show-checkbox "+

                " node-key=\"id\" "+

                " ref=\"tree\" "+

                " highlight-current"+

                " @check=\"showHandleBox\" "+

                " check-strictly>"+

                    "<span class=\"custom-tree-node\" slot-scope=\"{node,data}\">"+

                        "<i :class=\"data.equipmentIcon\" v-show=\"data.showIcon\" :style=\"{color:data.status==1?'#17b7f9':'#fff'}\" style=\"float: left; width: 16px;height:16px; margin-top:16px; margin-right:4px;\"></i>"+

                        "<span :style=\"{color:data.status==1?'#17b7f9':'#ffffff'}\" > {{ node.label }} </span>"+

                        "<span style=\" font-size: 14px; display: block; width: 14px; position: absolute; right: 12px;\">"+

                            "<i class=\"el-icon-info\" v-if='data.unmarkble' style=\"color: #0ed9af\"></i>"+

                        "</span>"+

                    "</span>"+

                "</el-tree>"+

可以看到IE报错函数无法渲染,缺少标识符,这个错误找了整整一天,IE的提示容易引导走上寻找bug的错误之旅,其实很简单,在"<span class=\"custom-tree-node\" slot-scope=\"{ node, data }\">"中,只要把{node,data}换为一个对象名称,例如scope即可,下面需要用到{node,data}地方均改为scope.data, scope.node即可

附改后的代码

"<el-tree "+

                " :data=\"treeData\"  "+

                " render-after-expand "+

                " show-checkbox "+

                " node-key=\"id\" "+

                " ref=\"tree\" "+

                " highlight-current"+

                " @check=\"showHandleBox\" "+

                " check-strictly>"+

                    "<span class=\"custom-tree-node\" slot-scope=\"scope\">"+

                        "<i :class=\"scope.data.equipmentIcon\" v-show=\"scope.data.showIcon\" :style=\"{color:scope.data.status==1?'#17b7f9':'#fff'}\" style=\"float: left; width: 16px;height:16px; margin-top:16px; margin-right:4px;\"></i>"+

                        "<span :style=\"{color:scope.data.status==1?'#17b7f9':'#ffffff'}\" > {{ scope.node.label }} </span>"+

                        "<span style=\" font-size: 14px; display: block; width: 14px; position: absolute; right: 12px;\">"+

                            "<i class=\"el-icon-info\" v-if='scope.data.unmarkble' style=\"color: #0ed9af\"></i>"+

                        "</span>"+

                    "</span>"+

                "</el-tree>"+
Logo

前往低代码交流专区

更多推荐