Vue+elementUI使用笔记

(1) vue引入elementui

1.使用npm安装element-ui

npm i element-ui -S

2.在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);

图片轮播参考：https://blog.csdn.net/qinyongqaq/article/details/80817628

 

(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中的参数：

https://blog.csdn.net/woaizhuzhuxia521521/article/details/83619520

 

（6）设置select的value值时，显示的是value而不是对应的label选项名称。

解决方法：value格式问题，接口获取的value可能为字符串，需要转换成number类型

参考：https://segmentfault.com/a/1190000016737140

 

（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();

参考：https://blog.csdn.net/abcde158308/article/details/80578909

 

（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，或搜其他方法