实战：element-ui 树型控件自定义图标（给节点添加图标） 效果图：<el-input v-model="searchVal" placeholder="请输入关键词" clearable style="margin-bottom: 12px" /> <div class="treeBox"> <el-tree :data="sourceData" node-key="id" default-expand-all :expand-on-click-node="false" :props="defaultProps" @node-click="handleNodeClick" > // 重点：给节点添加图标 <span slot-scope="{ node, data }" class="slot-t-node"> <template> <i :class="{ 'el-icon-folder': !node.expanded, // 节点收缩时的图标 'el-icon-folder-opened': node.expanded, // 节点展开时的图标 'el-icon-user-solid': data.type === 2 // data.type是后端配合提供的识别字段，最后一级 }" style="color: #409eff;" // 图标颜色 /> <span>{{ node.label }}</span> </template> </span> </el-tree> </div>data() { return { searchVal: '', // 输入的关键词 defaultProps: { children: 'childrenList', // 将tree中的每项的 childrenList 映射为 children label: 'name' // 将tree中的每项的 name 映射为 label }, sourceData: [ // 树源数据 { id: null, name: '深圳市XXX有限公司', parentId: '0', childrenList: [ { id: null, name: '研发中心', parentId: '1', childrenList: [ { id: null, name: '研发1组', parentId: '2', childrenList: [ { id: null, name: 'IOS测试机', parentId: null, childrenList: null, type: 2 } ], type: 1 }, { id: null, name: '安卓测试机', parentId: null, childrenList: null, type: 2 } ], type: 1 }, { id: null, name: '产品中心', parentId: '1', childrenList: [], type: 1 }, { id: null, name: '员工1', parentId: null, childrenList: null, type: 2 }, { id: null, name: '员工12', parentId: null, childrenList: null, type: 2 }, { id: null, name: '员工13', parentId: null, childrenList: null, type: 2 } ], type: 1 } ] } }, methods: { // 节点点击时 handleNodeClick(data) { // 。。。 } }

vue项目中使用elementUI的el-tabs组件跳转卡死问题 解决方案1：在页面上使用了el-tabs元素的页面(log.vue)，使用el-row el-col元素来包裹el-tabs元素，也可以解决页面卡死问题<tempalte> <div class="log-box"> <el-row> <el-col :span="24"> <el-tabs> <el-tab-pane>1111</el-tab-pane> <el-tab-pane>22222</el-tab-pane> </el-tabs> </el-col> </el-row> </div> </template>解决方案2：在el-tabs标签上面，加一个兄弟节点–空的块级元素<tempalte> <div class="log-box"> <div>&nbsp;</div> <el-tabs> <el-tab-pane>1111</el-tab-pane> <el-tab-pane>22222</el-tab-pane> </el-tabs> </div> </template>此块级元素，要占位dom内容，但不设置宽高，即不影响页面为主；解决方案3：降级elementUI版本到2.6.3，或者升级vue版本到2.6x+解决方案4：vue(2.5.2)版本过低时 elment版本过高，会出现这个问题，解决方法：终端输入 npm audit fix 命令执行即可