(1) vue引入elementui
1.使用npm安装element-ui
npm i element-ui -S2.在main.js中导入使用vue
import 'element-ui/lib/theme-chalk/index.css' //别忘了导入样式
import ElementUI from 'element-ui'
Vue.use(ElementUI)(2) Carousel轮播使用
需要引入的组件除了Carousel还有CarouselItem
import {Carousel,CarouselItem} from 'element-ui';
Vue.use(Collapse);
Vue.use(CollapseItem);(3) vue引入jquery、echarts不能直接import之后通过Vue.use()引入。可以通过webpack引入，或搜其他方法。
(4) 使用v-loading延迟显示内容
1）elementUI中的组件使用方法参考https://element.eleme.cn/#/zh-CN/component/loading#options
（直接看第一个示例代码）
2）使用说明：
step1，在需要loading的元素上添加v-loading
<v-chart v-loading="load1" ref="charts" :options="reservoirLine" />并在data中定义该变量load1: false,
step2，在需要触发的方法中设置先设置load1为true（即显示loading加载中）
handleCommand(command) {
this.load1 = true;
。。。
},step3，数据处理等功能完成时再设置load1为false
(5) vue-router
step1: 引入vue-router模块，并定义路由，router/index.js里：
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: () => import('@/pages/home')
},
{
path: '/map',
name: 'map',
component: () => import('@/pages/map')
}
]
})step2: 引入上述文件并使用
import router from '../../../router/index';
export default {
methods:{
openMap(){
this.$router.push('/map');
}
}
}** 获取url中的参数：
（6）设置select的value值时，显示的是value而不是对应的label选项名称。
解决方法：value格式问题，接口获取的value可能为字符串，需要转换成number类型
（7）formData输出为空
console.log(formData)只会输出原型
formdata直接输出是没有值的，里面都是私有变量，需要用get方法打印
console.log(formData.get('file'))
（8）elementui的upload上传组件，上传时发送了多次请求
设置action和auto-upload：
auto-upload设置为false后，会导致上传一次文件再点击上传没反应，解决方法：在上传函数中执行clearFiles()
uploadFile(file) {
this.$refs["fileUpload"].clearFiles();
。。。
},另外show-file-list设置为false可去掉自带的文件列表
（9）表单验证中upload的验证
element对upload的验证不知道怎么用。若想采用element的验证样式（例如标签前面*标注必选），又不想使用element对upload的验证，可以清除element原有验证，再自己写验证方式。
例如：给不想使用原生验证的el-form-item添加ref
<el-form-item label="选择文件：" prop="originFile" ref="upfile">
<el-upload
class="upload-demo"
action=""
ref="fileUpload"
:on-change="uploadFile"
accept=".pdf"
:auto-upload="false"
:show-file-list="false"
:limit="1">
<el-button size="small"><i class="el-icon-upload2"></i> 上传文件</el-button>
<span class="ml-5" v-show="name">{{name}}</span>
</el-upload>rules: {
originFile:[{required: true, message: '请选择文件', trigger: 'change'}]
},在自定义的上传功能uplpadFile函数里加一句：this.$refs.upfile.clearValidate();
（10）v-show无效，不能隐藏dom
方法：改用v-if试试
两者区别：
（1）手段：
v-if是动态的向DOM树内添加或者删除DOM元素；
v-show是通过设置DOM元素的display样式属性控制显隐；
（2）编译过程：
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；
v-show只是简单的基于css切换；
（3）编译条件：
v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);
v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；
（4）性能消耗：
v-if有更高的切换消耗；
v-show有更高的初始渲染消耗；
（5）使用场景：
v-if适合运营条件不大可能改变；
v-show适合频繁切换。
（11）v-for和v-if不能一起用
如果这么写
<el-form-item
v-for="(subitem,subindex) in groupItemParamList"
:key="subitem.value"
v-if="。。。"
></el-form-item>可能报错：Duplicate keys detected: '1'. This may cause an update error
因为v-for和v-if不能一起用
解决：可以v-for和v-show一起用，或选择filter，或搜其他方法
