1、界面效果
1、demo展示
2、项目中实际使用展示
2、功能介绍
- 1、实现了文件的上传功能
- 2、实现了文件的删除功能
- 3、实现了详情说明
3、实现代码
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>VueDemo</title><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script><linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><style>.file-green{color: #67C23A;}.on-file-hover:hover{color: #409EFF;text-decoration: underline;}</style></head><body><divclass="main"><divclass="attachTable"v-loading="attachLoading"><el-tablesize='mini':header-cell-style="{fontSize:'14px'}":cell-style="columnStyle":data="attachTableData"stripe><el-table-columnalign="center"label="No"type="index"width="60"></el-table-column><el-table-columnlabel="文件名称"prop="typeName"><templateslot-scope="scope"><div><spanstyle="color:red">*</span>{{scope.row.typeName}}</div></template></el-table-column><el-table-columnlabel="文件说明"><templateslot-scope="scope"><divv-for="v in scope.row.material":key="v"><p>{{v}}</p></div></template></el-table-column><el-table-columnlabel="文件列表"><templateslot-scope="scope"><ul><liv-for="(f,i) in scope.row.fileData":key="i"><span@click="openAttach(f)":class="[f.uid ?'cup file-green' :'cup on-file-hover']">{{f.file_name}}</span><el-buttonstyle="padding: 2px 4px;margin-left:4px;"type="danger"size="mini"@click="onFileDelete(f, scope.$index)">删除</el-button></li></ul></template></el-table-column><el-table-columnlabel="操作"width="120"><templateslot-scope="scope"><el-uploadclass="upload-demo"multipleaction="www.baidu.com":on-change="(file, fileList) => onFileChange(file,fileList,scope.row.typeName, scope.row.type, scope.$index)":on-remove="(file, fileList) => onFileChange(file,fileList,scope.row.typeName, scope.row.type, scope.$index)":show-file-list='false':auto-upload="false":file-list="fileList"><el-buttonsize="mini"type="text">上传</el-button></el-upload></template></el-table-column></el-table></div></div><script>var vm=newVue({
el:'.main',data(){return{
attachLoading:false,
preAttach:[],
fileList:[],
attachTableData:[{
typeName:'文件1',
type:'text1',
material:['1《测试q》','2《测试w》','3《测试e》'],
explain:''},{
typeName:'文件2',
type:'text2',
material:['1《测试r》','2《测试t》','3《测试y》','4《测试u》','5《测试i》','6《测试o》'],
explain:''},{
typeName:'文件3',
type:'text3',
material:['1《测试a》','2《测试s》'],
explain:''},{
typeName:'文件4',
type:'text4',
material:['1《测试d》','2《测试f》','3《测试g》','4《测试h》'],
explain:''},{
typeName:'文件5',
type:'text5',
material:['暂时无'],
explain:''},{
typeName:'文件6',
type:'text6',
material:['1《测试j》','2《测试k》'],
explain:''},{
typeName:'文件7',
type:'text7',
material:['1《测试l》','2《测试z》'],
explain:''}]};},
methods:{columnStyle(table){if(table.columnIndex==1){return"font-size: 14px; font-weight: 700;";}},onFileChange(){let fileData={...file, file_name:(file.name.indexOf(typeName)==-1? typeName+'_':'')+ file.name, type}this.$set(this.attachTableData[index],'fileData',this.attachTableData[index].fileData&&[...this.attachTableData[index].fileData, fileData]||[fileData])},getAttachData(aaa, bbb){this.attachLoading=true;const params={
aaa: aaa|0,
bbb: bbb|0,
attach_type:'something_for_type',
limit:100}getCmdbData('attached_file', params).then(r=>{this.attachLoading=false;this.preAttach= r.code==0&& r.data? r.data.data:[];this.fixTableData();})},fixTableData(){this.attachTableData.map(v=>{returnthis.$set(v,'fileData',this.preAttach.filter(x=> x.file_name.split('_')[0]== v.typeName));})},openAttach(attach){if(!attach.id){this.$message({
type:'info',
message:`尚未上传，请上传后再查看`});return;}let url= location.origin;
window.open(`${url}/xxxxxx?name=${attach.file_name}&hash=${attach.hash}`,"_blank");},resetList(){this.attachTableData.map((v)=>{returnthis.$set(v,'fileData',[]);})}}})</script></body></html>