vue-element-ui table表格中遍历集合数组中的集合元素 ,并且实现列合并
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
<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的对象。
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)