<template> <div> <a-row> <a-col :span="24" style="border-top: 0px; text-align: center"> <div class="main-title"> <span>附件</span> </div> </a-col> </a-row> <a-row type="flex" class="row_center"> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>序号</div> </div> </a-col> <a-col :span="6" class="bg-gray"> <div class="special-middle"> <div>附件名称</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>是否必备材料</div> </div> </a-col> <a-col :span="12" class="bg-gray"> <div class="special-middle"> <div>附件上传</div> </div> </a-col> <a-col :span="2" class="bg-gray"> <div class="special-middle"> <div>操作</div> </div> </a-col> </a-row> <a-row v-for="(item, index) in fileList" :key="'fileList' + index" type="flex"> <a-col :span="2" style="text-align: center; margin-top: 8px;"> {{ index + 1 }} </a-col> <a-col :span="6"> <div class="special-middle" v-if="item.required">{{ item.fileExplain }}</div> <a-form-model-item v-else :prop="'fileList.' + index + '.fileExplain'" :rules="{required: item.isRequired, message: '*',trigger: 'blur',}"> <a-input v-model="item.fileExplain" :maxLength="100" style="width: 100%" /> </a-form-model-item> </a-col> <a-col :span="2"> <div class="special-middle" style="text-align: center;"> <div>{{ item.isRequired == true && item.required ? "是" : "否" }}</div> </div> </a-col> <a-col :span="12" style="text-align: left;"> <div v-if="!item.isTitle" class="special-middle" style="text-align: left;"> <file-load :file.sync="fileList[index]" :index="index" :name="'fileList'" :format="['doc', 'docx', 'pdf']" /> </div> </a-col> <a-col :span="2"> <div class="special-middle"> <div v-if="!item.required"> <a-popconfirm title="确定要删除吗?" ok-text="确定" cancel-text="取消" @confirm="removefileList(item)"> <a-button type="link" size="small">删除</a-button> </a-popconfirm> </div> </div> </a-col> </a-row> <a-row type="flex"> <a-col :span="24" style="text-align: center"> <div class="special-middle"> <div> <a-button type="dashed" style="width: 50%" @click="addfileList()"> <a-icon type="plus" /> 添加 </a-button> </div> </div> </a-col> </a-row> </div> </template> <script> const File = { fileName: null, downloadUrl: null, fileExplain: null, downloadId: null, isRequired: true, required: false, isTitle: false }; export default { name: "fileEdit", props: { fileList: { type: Array, default: () => { return [{ ...File }]; }, }, }, data() { return {}; }, created() { }, methods: { // 添加附件 addfileList () { this.fileList.push(Object.assign({ ...File }, { fileExplain: '' })) }, // 删除附件 removefileList (item) { let index = this.fileList.indexOf(item) if (index !== -1) { this.fileList.splice(index, 1) } }, } }; </script>