可编辑的el-table表格，结合input输⼊,upload⽂件上传的表格最近整理了⼀下,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
>
<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="w.name" placeholder="请输⼊公司名称"></el-input>
</template>
</el-table-column>
<el-table-column
label="注册时间"
show-overflow-tooltip>
<template slot-scope="scope">
<el-date-picker
v-model="w.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="w, 'amount')" v-model="w.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="!w.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>
pany {
padding: 30px;
text-align: left;
}
.delete {
position: absolute;
top: 25px;
right: 10px;
inputtypefile不上传文件}
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}${apiPathmon.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 = place(/\.{2,}/g, '.') // 只保留第⼀个. 清除多余的
value = place('.', '$#$').replace(/\./g, '').replace('$#$', '.')
value = place(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3') // 只能输⼊两个⼩数return value
}
},
/
/ 预览图⽚
handlePreview (file) {
},
// 删除图⽚
handleRemove (file, fileList, index) {
this.tableData3[index].file = ''
},
// 图⽚上传
handleSuccess (res, file, fileList, index) {
if (de) {
this.tableData3[index].file = res.data.url
}
// 上传之后，把返回的fileList赋值给对应组件的fileList this.fileList[index] = fileList
}
}
}
</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。