element-ui使用总结

1.input输入框

自定义图标
前部效果图：

 <el-input type="text" v-model="code" auto-complete="off"  placeholder="请输入">
         <img slot="prefix" src="../../img/code.png" width="15px" height="15px" />
 </el-input>

后部效果图：

 <el-input type="text" v-model="code" auto-complete="off"  placeholder="请输入">
         <img slot="append" src="../../img/code.png" width="15px" height="15px" />
 </el-input>

2.select绑定数据

问题1：后台数据的绑定
数据：data: {type: ‘1’}
解决方法：数据转成int. 使用parseInt()

问题2：按理说应该显示的是label里的文字，但是显示的是相对应的value值
原因：v-model绑定的数据要string
解决方法：数据转成string. 使用toString()

<template>
	<el-select v-model="form.type" placeholder="请选择">
	          <el-option
	                    v-for="item in options"
	                    :key="item.codes"
	                    :label="item.cnvalue"
	                     :value="item.codes">
	         </el-option>
	</el-select>
</template>
<script>
 export default {
      data(){
          return {
            form: {},
             options: [{value: 1, label: '老人'},{value: 2, label: '小孩'},]
          }
     },
     mounted(){
          //得到数据data: {type:  '1'},赋值给form
          this.form.type = parseInt(type)
     }
}
</script>

3.upload自定义

效果图：

<template>
	<el-upload
	       class="avatar-uploader"
	       :action="imgUrl()"
	       :show-file-list="false"
	       :on-success="handleSuccess"
	       :before-upload="beforeUpload">
	     <img v-if="picUrl" :src="picUrl" class="avatar" width="148px" height="148px">
	     <div v-else class="upload-box">
	            <img src="../../../public/img/upload.png" width="60px" height="60px"/>
	            <p>上传图片</p>
	     </div>
	</el-upload>
</template>

<script>
import api from '../../utils/api'
 export default {
   data(){
      return {
         picUrl: null，
         id: ''
       }
   },
   methods:{
      //上传图片自定义链接
          imgUrl() {
              return `${api}/upload/imageUpLoad`
          },
          handleSuccess(file) {
                this.picUrl = file.data.file
          },
          beforeUpload(file) {
          //自定义请求数据和链接
               let fd = new FormData()
               fd.append('file', file)
               fd.append('id', id)
               addExcelUser(fd)
                     .then(res => {
                         console.log('发送成功',res)
                     })
               return true
          },
   }
}
</script>

<style lang="scss">
     .avatar-uploader {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 296px;
            height: 296px;
            line-height: 178px;
            text-align: center;
        }
        .upload-box {
            width: 296px;
            height: 296px;
            img {
                padding-top: 80px;
            }
            p {
                font-size: 14px;
            }
            &__desc {
                font-size: 12px;
                color: #707070;
            }
        }
</style>

project.js 请求文件

export  const  addExcelUser= data => {
    return request({
        url: `/xxxx/xxxx`,
        method: 'post',
        data
    })
}

4.日期限制选择范围

效果图：

<template>
        <div class="com-container">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item prop="arrangeTime" label="布展日期">
                    <el-date-picker
                            v-model="form.arrangeTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions0">
                    </el-date-picker>
                </el-form-item>
                <el-form-item prop="outTime" label="撤展日期">
                    <el-date-picker
                            v-model="form.outTime"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions1">
                    </el-date-picker>
                </el-form-item>
        </div>
</template>
<script>
    export default {
        data() {
            return {
             form: {
                    arrangeTime: [],
                    outTime: []
                },
                //日期限制
                pickerOptions0: {
                    disabledDate: (time) => {
                        return time.getTime() < new Date().getTime()
                    }
                },
                pickerOptions1: {
                    disabledDate: (time) => {
                        return time.getTime() < this.form.arrangeTime[1] || time.getTime() < Date.now();
                    }
                }
            }
        }
    };
</script>

5.三级联动

1.页面加载前把数据理成options

 options: [{
          value: 'zhinan',
          label: '指南',
          children:  [{
          value: 'zhinan',
          label: '指南',
          children:  [{
          value: 'zhinan',
          label: '指南',
             },{
          value: 'xiaolv',
          label: '效率',
             }]
          }]
     }]