Vue踩坑-elementUI-tree树状图组件：IE11-Failed to generate render function:SyntaxError: 缺少标识符 in

最新推荐文章于 2024-07-17 11:09:40 发布

MissM0116

最新推荐文章于 2024-07-17 11:09:40 发布

阅读量8.7k

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_42018057/article/details/81385121

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这里写图片描述

代码如下

"<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>"+