<el-table
size="small"
:data="invoice"
:span-method="arraySpanMethod"
style="width: 100%"
height="490">
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="date"
label="合同编号"
width="150">
<template slot-scope="scope">
<el-input size="mini" v-model=scope.row.contractCode></el-input>
</template>
</el-table-column>
<el-table-column
prop="name"
label="上传合同扫描件"
width="150">
<template slot-scope="scope">
<!-- #409EFF -->
<div style="background: #409EFF;text-align: center;color:white;border-radius: 5px;font-size: 13px;"><p>请上传对应和同</p><p>的发票扫描件</p></div>
</template>
</el-table-column>
<el-table-column
prop="province"
label="发票类型"
width="150">
<template slot-scope="scope">
<div v-for="(item, index) in invoice[scope.$index].invoices" :key="index">
<el-input size="mini" style="margin-top: 0px;width: 130px" v-model=scope.row.title></el-input>
<el-input size="mini" style="margin-top: 0px;width: 100px" v-model=scope.row.title></el-input>
<el-input size="mini" style="margin-top: 0px;width: 100px" v-model=scope.row.title></el-input>
<el-input size="mini" style="margin-top: 0px;width: 100px" v-model=scope.row.title></el-input>
<el-input size="mini" style="margin-top: 0px;width: 120px" v-model=scope.row.title></el-input>
<p style="display:inline-block;margin-left: 20px;margin-top: 3px;width:70px;height:20px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">融资扫描件啊</p>
<p style="display:inline-block;margin-left: 30px;width:40px;height:30px;overflow: hidden;">
<img src="../../assets/images/step_27.jpg">
</p>
</div>
</template>
</el-table-column>
<el-table-column
prop="city"
label="发票代码"
width="120">
</el-table-column>
<el-table-column
prop="province"
label="发票号码"
width="100">
</el-table-column>
<el-table-column
prop="province"
label="发票金额"
width="100">
</el-table-column>
<el-table-column
prop="province"
label="发票日期"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="发票扫描件"
width="100">
</el-table-column>
<el-table-column
prop="zip"
label="操作"
width="100">
</el-table-column>
</el-table>
获取当前数组的下标使用
scope.$index :获取当前行的下标
scope.row:获取当前行的对象 然后使用v-for遍历,
v-for="(item, index) in invoice[scope.$index].invoices"
合并列
//合并列
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 3) {
return [1, 7];
}else if (columnIndex === 9){
return [1,1];
}
}
通过给table
传入span-method
方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row
、当前列column
、当前行号rowIndex
、当前列号columnIndex
四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。