如何在vue页面,采用el-row和el-col来展示该表格,完整代码
时间: 2024-10-17 20:09:10 浏览: 28
vue el-table实现行内编辑功能
4星 · 用户满意度95%
要在Vue页面中使用`el-row`和`el-col`元素来展示一个类似于您提供的代收代付业务汇总清单的表格,首先需要引入Element UI库。下面是一个简单的示例代码:
```html
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<!-- 表格列定义 -->
<el-table-column prop="enterpriseName" label="企业名称"></el-table-column>
<el-table-column prop="contractNumber" label="合约编号"></el-table-column>
<el-table-column prop="contractName" label="合约名称"></el-table-column>
<el-table-column prop="signingAccount" label="签约账号"></el-table-column>
<el-table-column prop="contractPurpose" label="合约用途"></el-table-column>
<el-table-column prop="totalAmountCapital" label="总金额(大写)"></el-table-column>
<el-table-column prop="totalAmountDecimal" label="总金额(小写)"></el-table-column>
<el-table-column prop="transactionCount" label="总笔数"></el-table-column>
<el-table-column prop="fileNumber" label="文件编号"></el-table-column>
<el-table-column prop="commissionUnitSealFillerSupervisorCommissionDate" label="委托单位签章/填制人/主管/委托日期">
<template slot-scope="scope">
{{ scope.row.commissionUnitSeal }}/{{ scope.row.filler }}/{{ scope.row.supervisor }}/{{ scope.row.commissionDate }}
</template>
</el-table-column>
<el-table-column prop="bankSealAcceptorAcceptanceDate" label="银行签章/受理人/受理日期">
<template slot-scope="scope">
{{ scope.row.bankSeal }}/{{ scope.row.acceptor }}/{{ scope.row.acceptanceDate }}
</template>
</el-table-column>
</el-table>
<!-- 模拟数据区域 -->
<el-row>
<el-col :span="6">模拟数据区域</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
// 在这里填充您的具体数据
{
enterpriseName: '企业A',
contractNumber: '123456',
contractName: '合约A',
signingAccount: '1234567890',
contractPurpose: '付款',
totalAmountCapital: '壹万元整',
totalAmountDecimal: '10000',
transactionCount: '5',
fileNumber: '001',
commissionUnitSeal: '企业A印章',
filler: '张三',
supervisor: '李四',
commissionDate: '2023-01-01',
bankSeal: '银行印章',
acceptor: '王五',
acceptanceDate: '2023-01-02'
},
// 更多数据行...
]
};
}
};
</script>
<style scoped>
/* 添加样式以适应您的需求 */
</style>
```
此代码段展示了如何用Element UI中的`el-table`组件来构建一个表格,并且利用`el-row`与`el-col`来布局整个页面。注意替换示例数据为实际的数据源。此外,请确保已经正确安装并导入了Element UI库。
阅读全文