最近整理了一下,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" alt=""></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>