| | |
| | | <!-- 图片类型显示 --> |
| | | <template v-else-if="header.type === 'image'"> |
| | | <img v-if="scope.row[header.name]" |
| | | :src="scope.row[header.name]" |
| | | :src="getFullUrl(scope.row[header.name])" |
| | | alt="头像" |
| | | class="table-image" /> |
| | | </template> |
| | |
| | | </div> |
| | | <!-- 文件上传 --> |
| | | <div v-else-if="item.type == 'fileUpload'"> |
| | | <el-upload v-if="editable" action="#" :file-list="item.data.fileList" |
| | | :on-change="(file, fileList) => handleFileChange(idx, fileList)" list-type="text"> |
| | | <el-upload v-if="editable" :http-request="customUploadRequest" :file-list="item.data.fileList" |
| | | :on-change="(file, fileList) => handleFileChange(idx, fileList)" |
| | | :on-success="(res, file, fileList) => handleFileSuccess(res, file, fileList, idx)" |
| | | list-type="text"> |
| | | <el-button size="small" icon="el-icon-upload2">点击上传</el-button> |
| | | </el-upload> |
| | | <div v-else> |
| | |
| | | <!-- 图片上传 --> |
| | | <div v-else-if="item.type == 'imageUpload'"> |
| | | <div class="image-upload-container"> |
| | | <el-upload v-if="editable" action="#" :file-list="item.data.imageList" |
| | | <el-upload v-if="editable" :http-request="customUploadRequest" :file-list="item.data.imageList" |
| | | :on-change="(file, fileList) => handleImageChange(idx, fileList)" |
| | | :on-success="(res, file, fileList) => handleImageSuccess(res, file, fileList, idx)" |
| | | :auto-upload="true" |
| | | :http-request="() => { }" |
| | | :before-upload="beforeImageUpload" |
| | | list-type="picture-card" |
| | | :on-preview="(file) => handlePreview(file, idx)" |
| | |
| | | <div v-else class="image-preview"> |
| | | <el-image v-for="image in item.data.imageList" |
| | | :key="image.uid" |
| | | :src="image.url" |
| | | :preview-src-list="item.data.imageList.map(img => img.url)" |
| | | :src="getFullUrl(image.url)" |
| | | :preview-src-list="item.data.imageList.map(img => getFullUrl(img.url))" |
| | | class="preview-image" /> |
| | | </div> |
| | | <div class="uploaf-notice">支持.jpg .png格式</div> |
| | |
| | | import Table from "../Table/index.vue"; |
| | | import addTableHeader from "./addTableHeader.vue"; |
| | | import addTableData from "./addTableData.vue"; |
| | | import apiConfig from '../../utils/baseurl' |
| | | import { customUploadRequest, getFullUrl } from '@/utils/utils' |
| | | |
| | | export default { |
| | | name: "DynamicComponent", |
| | |
| | | }, |
| | | data() { |
| | | return { |
| | | apiConfig:apiConfig, |
| | | showAddDialog: false, |
| | | components: [], |
| | | tableHeaderDialog: { |
| | |
| | | }, |
| | | handleFileChange(idx, fileList) { |
| | | if (!this.editable) return; |
| | | |
| | | fileList = fileList.map(file => { |
| | | if (!file.url) { |
| | | file.url = 'https://picsum.photos/200/200'; |
| | | } |
| | | if (!file.name) { |
| | | file.name = '默认文件.txt'; |
| | | } |
| | | return file; |
| | | }); |
| | | // 只做 fileList 同步 |
| | | this.components[idx].data.fileList = fileList; |
| | | this.emitUpdate(); |
| | | }, |
| | | handleFileSuccess(res, file, fileList, idx) { |
| | | // 上传成功后设置真实 url |
| | | file.url = res.data.url; |
| | | this.components[idx].data.fileList = fileList; |
| | | this.emitUpdate(); |
| | | }, |
| | | handleImageChange(idx, fileList) { |
| | | if (!this.editable) return; |
| | | |
| | | fileList = fileList.map(file => { |
| | | if (!file.url) { |
| | | file.url = 'https://picsum.photos/200/200'; |
| | | } |
| | | return file; |
| | | }); |
| | | // 只做 imageList 同步 |
| | | this.components[idx].data.imageList = fileList; |
| | | this.emitUpdate(); |
| | | }, |
| | | handleImageSuccess(res, file, fileList, idx) { |
| | | file.url = 'https://picsum.photos/200/200'; |
| | | // 上传成功后设置真实 url |
| | | file.url = res.data.url; |
| | | this.components[idx].data.imageList = fileList; |
| | | this.emitUpdate(); |
| | | }, |
| | | beforeImageUpload(file) { |
| | | const isJPG = file.type === 'image/jpeg'; |
| | |
| | | // 使用el-image的preview-src-list实现预览 |
| | | // 这里直接用Element的图片预览能力,实际上el-upload会自动处理 |
| | | // 但如果你想自定义弹窗,可以用如下代码: |
| | | this.imagePreviewUrl = file.url; |
| | | this.imagePreviewUrl = this.getFullUrl(file.url); |
| | | this.imagePreviewVisible = true; |
| | | }, |
| | | emitUpdate() { |
| | |
| | | this.$emit('update:dataSource', updatedComponents); |
| | | }, |
| | | }, |
| | | computed: { |
| | | }, |
| | | }; |
| | | </script> |
| | | |