(ps:僅以此文記錄項(xiàng)目中使用過的element組件經(jīng)驗(yàn)及某些坑鼎姊。Let‘s beigin...)
<!-- 選項(xiàng)數(shù)據(jù)是固定寫死的 -->
<el-select v-model="position" placeholder="位置" @change="change">
<el-option label="首頁" value='1'></el-option>
<el-option label="發(fā)現(xiàn)" value='2'></el-option>
<el-option label="我的" value='3' :disabled=true></el-option>
</el-select>
<!-- 選項(xiàng)數(shù)據(jù)由接口提供，循環(huán)創(chuàng)建 -->
<el-select v-model="position" placeholder="請(qǐng)選擇"
@change='change'
@visible-change="clickedSeletion">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id">
</el-option>
</el-select>
<script>
export default {
data() {
return {
options: [
{id: 1, name:'首頁'},
{id: 2, name:'發(fā)現(xiàn)'},
{id: 3, name:'我的'},
],
position: 2, // 這個(gè)字段名跟v-model綁定的是同一個(gè)苗缩，會(huì)自動(dòng)選擇與:value中對(duì)應(yīng)相同的值
}
},
methods: {
change(value) {
// 這里的值默認(rèn)是當(dāng)前選擇:value中的值，可在這個(gè)方法里處理相應(yīng)邏輯
console.log(value)
},
clickedSeletion() {
// 只要點(diǎn)擊了選擇框就會(huì)觸發(fā)
}
}
}
</script>
el-select的@change方法堰氓，默認(rèn)只能傳:value的值挤渐，那如何傳自定義參數(shù)呢？
<div v-for="(item,index) in details">
<el-select v-model="item.articleTitle" placeholder="" @change="(val)=>selected(val,item)">
<el-option
v-for="ele in articleList"
:key="ele.id"
:label="ele.articleTitle"
:value="ele.id">
</el-option>
</el-select>
</div>
屆時(shí)selected(val, item) {}方法中可直接打印出兩個(gè)參數(shù)双絮。
<el-upload
class="upload-demo"
action="后端上傳文件接口"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeImgUpload"
:file-list="fileList"
name="upfile" // 上傳的文件字段名 默認(rèn)是file 記得跟后端保持一致
list-type="picture">
<el-button size="small" type="primary">選擇上傳圖片</el-button>
<div slot="tip" class="el-upload__tip">只能上傳jpg/png格式文件浴麻，文件不能超過2M</div>
</el-upload>
<script>
export default {
data() {
return {
// 圖片列表，組件規(guī)定一定要按照 name囤攀、url的字段名來
fileList: [
{"name":"", "url":""},
{"name":"", "url":""}
],
}
},
methods: {
// 上傳文件之前的函數(shù)
beforeImgUpload() {
// 限制文件格式和大小
const isJPG_PNG = file.type == ('image/jpeg' || 'image/png');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG_PNG) {
this.$message.error('上傳圖片格式錯(cuò)誤');
}
if (!isLt2M) {
this.$message.error('圖片大小不能超過2M');
}
return isJPG_PNG && isLt2M;
}
}
}
</script>
坑點(diǎn)來了......
Part 1
handleSucce這個(gè)鉤子函數(shù)里帶的fileList并不是我們?cè)?code>data中定義的fileList善镰。在視覺效果上上傳成功后組件會(huì)自動(dòng)更新UI知举，但最后提交數(shù)據(jù)時(shí)，this.fileList并沒有更新數(shù)據(jù)，需要我們手動(dòng)添加狰住。
另外递沪，添加文件數(shù)據(jù)時(shí)帘腹，文件的url值一定要取file.response.result嚎研。因?yàn)橹苯哟?code>file.url的時(shí)候，這個(gè)值時(shí)好時(shí)壞噩斟，有時(shí)是以http:開頭的(正確的地址)曹锨，也可能是以blob:開頭的地址。（如果有大神知道原因剃允，望告知沛简。）
同理，在handleRemove這個(gè)鉤子函數(shù)也會(huì)存在這個(gè)問題斥废。文件刪除之后一定要記得手動(dòng)更新this.fileList椒楣。另外，對(duì)于被刪除圖片的url牡肉，這里需要加一層判斷捧灰。
同樣打印的都是被刪除的那張圖片，返回的對(duì)象數(shù)據(jù)并不一樣统锤，一個(gè)含有response凤壁，一個(gè)不含吩屹。而含有response字段的跪另，url的值就是blob:開頭的拧抖，最后取值要以response.result為準(zhǔn)。不含有response字段的數(shù)據(jù)中免绿，url的值就可以直接拿來用唧席。（如果有大神知道原因，望告知嘲驾。）
Part 2
在beforeImgUpload這個(gè)鉤子函數(shù)中淌哟，return false 后有時(shí)會(huì)自動(dòng)觸發(fā)handleRemove這個(gè)函數(shù)，導(dǎo)致圖片被誤刪辽故。需要加以判斷徒仓，代碼如下。
handleRemove(file, fileList) {
if (file && file.status==="success") {
// 處理刪除操作
}
}
-
el-input 和 el-select 寬度不一致的問題
.el-form-item .el-select {
width:100%;
}
