最近在使用 element-ui 做项目时，所遇到的一些问题

这篇文章是对于，在使用 element-ui 做项目时，所遇到的一些问题 :

---

• 使用 el-cascader 级联器时，出现下拉列表过长 ：

使用目标: 引入 el-cascader 级联器，实现数据分级下拉显示。

出现问题：下拉列表太长，无法显示全局以及输入框的内容。

产生原因：可能是由于 Element-UI 版本问题。

解决方法：在全局样式表中插入的下面两种样式中的一种即可。

/*第一种*/
.el-scrollbar_wrap{
    height: 200px;
}

/*第二种*/
.el-cascader-menu{
    height: 200px;
}

• 引入 Element-UI 的时间线 Timeline 和 Timeline-Item 时 ：

使用目标：引入 Element-UI 的时间线 Timeline 和 Timeline-Item。

出现问题: Module not found: Error: Can’t resolve ‘…/timeline/src/item’ in 'D:\Study\Web\VUE\7.vue-shop\vue-shop\src\plugins\timeline-item’。

产生原因: 由于版本原因打算手动在 Element-UI 的按需导入文件 element.js 中添加时间线 Timeline 和 Timeline-Item,但是对应安装包已经存在，不同在另行插入。

解决方法：删除自己手动引入的代码块，直接在 element.js 按需导入Timeline 和 Timeline-Item 即可。

import {Timeline,Timeline-Item} from 'element-ui'

Vue.use(Timelinte)

Vue.use(Timelint-Item)

• 项目优化，定制首页内容 时出错 ：

使用目标：项目优化时，定制首页内容，即在不同的打包环境下，按需渲染页面的标题 。我们可以通过插件的方式进行定制。在 webpack 的模板文件中 index.html 中配置如下的代码：

<title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>XXX</title> 
<!– 按需加载外部的 CDN 资源 --> 
<% if(htmlWebpackPlugin.options.isProd) { %> 
<!—通过 externals 加载的外部 CDN 资源--> 
········
<% } %> 

出现问题：添加如下注释（包括’<%’，其中'<%'表示输出的意思）就出现了上述报错，Error: Child compilation failed:Module build failed (from ./node_modules/html-webpack-plugin/lib/loader.js): SyntaxError: Invalid or unexpected token。大致意思是【错误：子编译失败：模块生成失败（来自./node_modules/html webpack plugin/lib/loader.js）：语法错误：无效或意外的标记】。

产生原因：注释并不是删除代码，写注释的同时也要注意对原有代码产生的影响。​​​​​​​

解决方法: 删除注释即可。
注： HTML 代码中 <%%>，<％=％>，<％：％> 的各自含义：

i. <%%> 之间可以写服务器端代码；

ii. <％=％> 获取后台的变量值，比如后台一个会话 [“ab”] =“ab”;前台 <％= session [“ ab“]％> 就能取到值;

iii. <％：％> 同 <％=％>
 

• 外部 引入CDN资源 ，减小打包体积时，出现的问题 ：

使用目标: 外部引入 CDN 资源，减小打包体积，从而提高速率。然后通过 node 创建 web 服务器，从而实现网址登陆。

步骤如下：

i. 创建 web 服务器；

ii. 托管静态资源，即 vue 打包生成的 dist 文件夹（webpack打包的出口文件)；

iii.启动 web 服务器。​​​​​​​

出现问题1：h.a is undefined；

产生原因：引入 CDN 资源的 js 文件自身是一定的顺序的。js 加载的时候也是按照顺序一个一个加载的,加载 element-ui 时需要用到 vue​​​​​​​；

解决方法：调整顺序得以解决。​​​​​​​

出现问题2：Error: if there’s nested data, rowKey is required.(如果有嵌套的数据，需要在 el-table 标签中新增 row-key字段​​​​​​​)

产生原因: element-ui 2.7.0 中增加了对树形结构的支持，使用树结构时，数据里面需要有 id，属性 row-key 是必填的​​​​​​​;

解决方法: 知道是 element-ui 版本问题之后，可以修改直接引入 CDN 资源的 element-ui 版本即可。​​​​​​​

参考链接 : https://blog.csdn.net/qq_36151930/article/details/105678011​​​​​​​