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')     

          })