最近整理了一下,table表格的编辑状态,把一般表格里需要输入的类型都放进来了,实现的功能如图
这里面的input输入框没什么好说的,绑定对应的值就可以,要注意的是组件上传的upload,这个表格是有多个upload上传组件的,upload组件的文件列表是根据fileList展示的,所在在处理方法的时候要注意fileList的处理
下面放代码
<template> ?<div> ???<p>shopInfo</p> ???<div class="company"> ?????<p><el-button type="primary" @click="addCompany">添加公司</el-button></p> ?????<el-table ???????ref="multipleTable" ???????:data="tableData3" ???????border ???????style="width: 100%"> ???????<el-table-column ?????????label="序号" ?????????type="index" ?????????width="55"> ???????</el-table-column> ???????<el-table-column ?????????label="公司名称" ?????????show-overflow-tooltip> ?????????<template slot-scope="scope"> ???????????<el-input v-model="scope.row.name" placeholder="请输入公司名称"></el-input> ?????????</template> ???????</el-table-column> ???????<el-table-column ?????????label="注册时间" ?????????show-overflow-tooltip> ?????????<template slot-scope="scope"> ???????????<el-date-picker ?????????????v-model="scope.row.date" ?????????????type="date" ?????????????placeholder="选择日期"> ???????????</el-date-picker> ?????????</template> ???????</el-table-column> ???????<el-table-column ?????????label="注册资金" ?????????show-overflow-tooltip> ?????????<template slot-scope="scope"> ???????????<el-input @blur="InputNumber(scope.row, ‘amount‘)" v-model="scope.row.amount" placeholder="请输入注册资金"></el-input> ?????????</template> ???????</el-table-column> ???????<el-table-column ?????????label="注册文件" ?????????show-overflow-tooltip> ?????????<template slot-scope="scope"> ???????????<el-upload ?????????????class="upload-demo" ?????????????:action="action" ?????????????:data="uploadData" ?????????????:on-preview="handlePreview" ?????????????<!-- 在组件的回调函数里加一个索引的参数 --> ?????????????:on-remove="function(file,fileList){return handleRemove(file,fileList,scope.$index)}" ?????????????:on-success="function(res,file,fileList){return handleSuccess(res,file,fileList,scope.$index)}" ?????????????multiple ?????????????:limit="1" ?????????????:file-list="fileList[scope.$index]"> ?????????????<el-button size="small" type="text" v-if="!scope.row.file">上传文件</el-button> ???????????</el-upload> ???????????<span class="delete" @click="deleteCompany(scope.$index)"><img src="/static/images/close.png" ></span> ?????????</template> ???????</el-table-column> ?????</el-table> ???</div> ?</div></template><style scoped> ?.company { ???padding: 30px; ???text-align: left; ?} ?.delete { ???position: absolute; ???top: 25px; ???right: 10px; ?} ?td .el-upload-list__item { ???margin-top: -25px; ?}</style><script>// import host from ‘rootPath/config/host‘ // host文件// import apiPath from ‘rootPath/config/api.json‘ // api文件export default { ?name: ‘shopInfo‘, ?data () { ???return { ?????tableData3: [], ?????selectedTable: [], ?????fileList: [[]], ?????// action: `${host.apiUrl}${apiPath.common.qiniuupload}`, ?????action: ``, ?????uploadData: {userId: 1304, pathName: ‘company‘} ???} ?}, ?created () { ???this.setTable() ?}, ?methods: { ???setTable () { ?????this.tableData3 = [{ ???????name: ‘‘, ???????date: ‘‘, ???????amount: null, ???????file: ‘‘ ?????}] ???}, ???// 添加公司 ???addCompany () { ?????this.tableData3.push({ ???????name: ‘‘, ???????date: ‘‘, ???????amount: null, ???????file: ‘‘ ?????}) ?????this.fileList.push([]) ???}, ???// 删除公司 ???deleteCompany (i) { ?????this.tableData3.splice(i, 1) ?????// 删除的时候要把fileList清除,否则页面已上传的文件不会被清空 ?????this.fileList.splice(i, 1) ?????console.log(this.fileList) ???}, ???// 过滤输入的金额 ???InputNumber (row, property) { ?????row[property] = this.limitInputPointNumber(row[property]) ???}, ???// 限制只能输入数字(可以输入两位小数) ???limitInputPointNumber (val) { ?????if (val === 0 || val === ‘0‘ || val === ‘‘) { ???????return ‘‘ ?????} else { ???????let value = null ???????value = String(val).replace(/[^\d.]/g, ‘‘) // 清除“数字”和“.”以外的字符 ???????value = value.replace(/\.{2,}/g, ‘.‘) // 只保留第一个. 清除多余的 ???????value = value.replace(‘.‘, ‘$#$‘).replace(/\./g, ‘‘).replace(‘$#$‘, ‘.‘) ???????value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, ‘$1$2.$3‘) // 只能输入两个小数 ???????return value ?????} ???}, ???// 预览图片 ???handlePreview (file) { ???}, ???// 删除图片 ???handleRemove (file, fileList, index) { ?????this.tableData3[index].file = ‘‘ ???}, ???// 图片上传 ???handleSuccess (res, file, fileList, index) { ?????if (res.code) { ???????this.tableData3[index].file = res.data.url ?????} ?????// 上传之后,把返回的fileList赋值给对应组件的fileList ?????this.fileList[index] = fileList ???} ?}}</script>可编辑的el-table表格,结合input输入,upload文件上传的表格
原文地址：https://www.cnblogs.com/steamed-twisted-roll/p/10138738.html