(ps:仅以此文记录项目中使用过的element组件经验及某些坑。Let‘s beigin...)
<!-- 选项数据是固定写死的 -->
<el-select v-model="position" placeholder="位置" @change="change">
<el-option label="首页" value='1'></el-option>
<el-option label="发现" value='2'></el-option>
<el-option label="我的" value='3' :disabled=true></el-option>
</el-select>
<!-- 选项数据由接口提供，循环创建 -->
<el-select v-model="position" placeholder="请选择"
@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:'发现'},
{id: 3, name:'我的'},
],
position: 2, // 这个字段名跟v-model绑定的是同一个，会自动选择与:value中对应相同的值
}
},
methods: {
change(value) {
// 这里的值默认是当前选择:value中的值，可在这个方法里处理相应逻辑
console.log(value)
},
clickedSeletion() {
// 只要点击了选择框就会触发
}
}
}
</script>
el-select的@change方法，默认只能传:value的值，那如何传自定义参数呢？
<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>
届时selected(val, item) {}方法中可直接打印出两个参数。
<el-upload
class="upload-demo"
action="后端上传文件接口"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeImgUpload"
:file-list="fileList"
name="upfile" // 上传的文件字段名 默认是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 {
// 图片列表，组件规定一定要按照 name、url的字段名来
fileList: [
{"name":"", "url":""},
{"name":"", "url":""}
],
}
},
methods: {
// 上传文件之前的函数
beforeImgUpload() {
// 限制文件格式和大小
const isJPG_PNG = file.type == ('image/jpeg' || 'image/png');
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG_PNG) {
this.$message.error('上传图片格式错误');
}
if (!isLt2M) {
this.$message.error('图片大小不能超过2M');
}
return isJPG_PNG && isLt2M;
}
}
}
</script>
坑点来了......
Part 1
handleSucce这个钩子函数里带的fileList并不是我们在data中定义的fileList。在视觉效果上上传成功后组件会自动更新UI，但最后提交数据时，this.fileList并没有更新数据，需要我们手动添加。
另外，添加文件数据时，文件的url值一定要取file.response.result。因为直接存file.url的时候，这个值时好时坏，有时是以http:开头的(正确的地址)，也可能是以blob:开头的地址。（如果有大神知道原因，望告知。）
同理，在handleRemove这个钩子函数也会存在这个问题。文件删除之后一定要记得手动更新this.fileList。另外，对于被删除图片的url，这里需要加一层判断。
同样打印的都是被删除的那张图片，返回的对象数据并不一样，一个含有response，一个不含。而含有response字段的，url的值就是blob:开头的，最后取值要以response.result为准。不含有response字段的数据中，url的值就可以直接拿来用。（如果有大神知道原因，望告知。）
Part 2
在beforeImgUpload这个钩子函数中，return false 后有时会自动触发handleRemove这个函数，导致图片被误删。需要加以判断，代码如下。
handleRemove(file, fileList) {
if (file && file.status==="success") {
// 处理删除操作
}
}
-
el-input 和 el-select 宽度不一致的问题
.el-form-item .el-select {
width:100%;
}
