vue&elementUI杂记

 

 

1. form表单中input输入框输入文字，回车后页面被刷新 @keyup.enter.native

解决方法： form标签内加@submit.native.prevent

 

2. 下拉选没法回显，考虑后台返回数据格式与当前vaule值格式不匹配

 

3.el-upload 文件上传很差用，考虑替换成formData上传的形式，禁用自动上传

代码实现：

<el-upload class="upload-demo" ref="upload" action="" :on-preview="handlePreview" :on-remove="handleRemove"

      :file-list="fileList" :limit="1"  :on-exceed="handleExceed" :auto-upload="false" style="position: relative; left: 86%; margin-left: -175px; width: 175px">

      <el-button slot="trigger" size="small" type="primary" v-if="isSelect">选取文件</el-button>

      <el-button style="margin-left: 10px;" size="small" type="success" v-if="isUpload" @click="submitUpload">上传文件</el-button>

    </el-upload>

 

  let formData = new window.FormData();

        this.$refs.upload.uploadFiles.forEach(element => {

          formData.append('file', element.raw)

          console.log(element)

        });

        let res = await this.$http.postFile('/api/files/upload', formData);

 

async function postFile(_url, obj) {

    obj = obj || {};

    var cfg = {

        method: 'POST',

        credentials: 'include',

        body: obj

    }

 

    let res = await fetch(_url, cfg);

    let json = await res.json()

 

    toLogin(json)

 

    return json

 

}

 

4. 表格中使用popover

 

v-model： 绑定的变量为一个数组，

点击取消时将数组中对应值修改成false

<el-popover placement="top" width="160" v-model="visible[scope.row.id]"  trigger="click">

            <p>请确认是否删除？</p>

            <div style="text-align: right; margin: 0">

              <el-button size="mini" type="text" @click="visible.splice(scope.row.id, 1, false)">取消</el-button>

              <el-button type="primary" size="mini" @click="deleteRelationship(scope.row)">肯定</el-button>

            </div>

            <el-button slot="reference" type='text' size="mini"  v-if="isDelete" @click="visible[scope.row.id] = true">删除</el-button>

          </el-popover>

 

 

5. a标签实现pdf预览功能，设置target="_blank",打开新的标签页

 

6. 父组件点击肯定按钮，对子组件中表单输入内容校验后提交

   const base = new Promise((resolve, reject) => {      

            return this.$refs['base_form'].validate((valid) => {  

              if (valid) {  

                 resolve() 

              }

            })    

        })

        const butt = new Promise((resolve, reject) => {      

            return this.$refs['progress_butt'].$refs['butt_form'].validate((valid) => {        

              if (valid) {  

                 resolve() 

              }     

            })    

          })

 

Promise.all([base, butt]).then(()=>{      

             let post = { }

                this.postProgress(post);  

            }).catch(() => {       

              console.log('submit error')     

          })