element console element console sources

目录

• Element-UI 前端UI 组件库

• 配置Element-UI 组件库

• 通过 UI 界面方式实现
• 配置插件

• 遇到的问题

---

Element-UI 前端UI 组件库

Element-UI 前端UI 组件库

---

配置Element-UI 组件库

配置Element-UI 组件库

---

通过 UI 界面方式实现

step1. 打开仪表盘

step2. 选择插件

step3.

step4.

step5. 安装插件vue/cli-element

配置插件

选择按需导入

完成安装

遇到的问题

problemOne:

vue.runtime.esm.js?430a:619 [Vue warn]: Unknown custom element: <el-avatar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Home> at src/components/Home.vue
       <App> at src/App.vue
         <Root>

分析原因：使用的该组件没有被引入

UI组件的引入：

problemTwo

分析原因逻辑代码中，在对象结束部分存在多余的逗号之类的错误

problemThree

分析原因：在逻辑代码中没有去定义该属性或方法，就开始在组件中使用该属性或方法导致出错

定义即可：

problemFour

Failed to compile.

./src/plugins/element.js
Module Error (from ./node_modules/_eslint-loader@2.2.1@eslint-loader/index.js):

F:\code\yijiupiyk_project\src\plugins\element.js
  60:23  error  Newline required at end of file but not found  eol-last

✖ 1 problem (1 error, 0 warnings)
  1 error and 0 warnings potentially fixable with the `--fix` option.

分析原因：Eslint语法检测，要求文件末尾有一个空行，否则会报错

Question 5:

vue.runtime.esm.js?430a:619 [Vue warn]: Missing required prop: "action"

found in

---> <ElUpload> at packages/upload/src/index.vue
       <ElFormItem> at packages/form/src/form-item.vue
         <ElForm> at packages/form/src/form.vue
           <ElDialog> at packages/dialog/src/component.vue
             <ElContainer> at packages/container/src/main.vue
               <Home> at src/components/Home.vue
                 <App> at src/App.vue
                   <Root>
vue.runtime.esm.js?430a:619 [Vue warn]: Invalid prop: type check failed for prop "action". Expected String, got Undefined 

found in

---> <Upload> at packages/upload/src/upload.vue
       <ElUpload> at packages/upload/src/index.vue
         <ElFormItem> at packages/form/src/form-item.vue
           <ElForm> at packages/form/src/form.vue
             <ElDialog> at packages/dialog/src/component.vue
               <ElContainer> at packages/container/src/main.vue
                 <Home> at src/components/Home.vue
                   <App> at src/App.vue
                     <Root>

分析原因：该组件的必要属性没有设置，因此报错，添加该属性即可

Question 6:

分析原因: 通过确保代码块使用了大括号包裹以避免bug的发生，并且增加代码的清晰度

解决方法：修改配置文件.eslintrc.js

Question 7: 当一个页面需要通过状态动态为表单项添加校验属性prop 时，可能会出现，校验不生效的问题

解决方法：当不需要设置 prop属性时，可以置空，即 :prop="’ '"

Question 8: 当 使用 Element-UI 组件时

Question 8: 当 使用 Element-UI 组件时，自定义校验方式

如果不指定 required: true 不会出现 * 号

函数传参（组件事件，保有默认参数，并可以传入自定义参数）

@callbackData="reBackSubData($event, scope.$index)  的使用   $event  --- 默认参数   ，第二个开发者传入的参数

第二种传参方式：回调函数

@callbackData="((data) => { reBackSubData(data, scope.$index) })"