1
2
3
4
5
6
7
8
9
10
| <el-form-item label="类型" :label-width="labelWidth" prop="name">
<el-select v-model="materialUploadForm.materialType" clearable filterable placeholder="请选择" style="width: 100px;background-color: transparent" class="select">
<el-option
v-for="item in materialTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <el-form-item label="上传" :label-width="labelWidth" prop="image">
<el-upload
class="avatar-uploader"
action=""
:show-file-list="false"
:on-change="handleUpdateChange"
:auto-upload="false"
>
<!-- :on-success="handleSuccess"-->
<img v-if="updateImage" :src="materialUpdateForm.imageUrl ===''?updateImage:materialUpdateForm.imageUrl"
class="avatar">
<i v-else class="el-icon-plus avatar-uploader-icon" style="position: absolute;left: 0px;top: 15px;"></i>
</el-upload>
</el-form-item>
</el-form>
|
具体操作就是：
在那个上传的类型选择materialTypeOptions里面加入图标
1
2
3
4
| {
value: 'tb',
label: '图标'
}
|
,然后点击上传，触发handleUpdateChange，在里面添加
1
2
3
| case "tb":
this.handleUpdateSvgChange(file)
break
|
点击确定，触发 submitUpdateForm事件，将图标上传，
最后在那个页面里面，在外部图标里面就会显示
也就是icon-list,就会显示出来那个上传的项目图标
