Vue踩坑-elementUI-tree树状图组件:IE11-Failed to generate render function:SyntaxError: 缺少标识符 in
代码如下"<el-tree "+" :data=\"treeData\""+" render-after-expand "+" show-checkbox "+" node-key=\"id\" "
·
代码如下
"<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>"+
更多推荐
已为社区贡献1条内容
所有评论(0)