封装组件

一个基本的表格行，其中包含了四个单元格。每两个单元格为一组，左边的单元格使用 td 标签，右边的单元格使用 td 标签。这样的表格通常用来展示键值对或者其他相关的信息。

下面是每个单元格的作用：

第一个单元格：使用 class="column" 将单元格的文本居中显示，并且添加了一个额外的样式。该单元格显示了当前行的左侧的键名。
第二个单元格：该单元格显示了当前行的左侧的键值。
第三个单元格：使用 class="column" 将单元格的文本居中显示，并且添加了一个额外的样式。该单元格显示了当前行的右侧的键名。
第四个单元格：该单元格显示了当前行的右侧的键值。

每个单元格中的内容由 Vue 中的 tableData 数组来动态渲染。通过 v-for 指令，可以根据 rowCount 来渲染多行数据。

tableData 数组中的每个元素都是一个对象，包含了 key 和 value 两个属性，分别表示当前行的左侧键名和值、右侧键名和值。

通过 index*2-2 和 index*2-1 的计算方式，可以将数组中的元素分别对应到每个单元格中。

通过 ?: 运算符，可以在数组中的元素不存在时显示空白文本。


<template>
    <table class="mailTable" :style="styleObject" v-if="s_showByRow">
         <tr v-for="index in rowCount" >
         //使用 `rowspan="2"` 将当前单元格合并到下面的单元格中
         //使用v-if="isOdd(index)去判断显示图片的地方，注意查看控制台输出
            <td class="image" rowspan="2"  v-if="isOdd(index)">
            <img src="image.jpg" alt="图片描述">
            </td>
            <td class="column">{{tableData[index*2-2] !== undefined ? tableData[index*2-2].key : ''}}</td>
            <td>{{tableData[index*2-2] !== undefined ? tableData[index*2-2].value : ''}}</td>
            <td class="column">{{tableData[index*2-1] !== undefined ? tableData[index*2-1].key : ''}}</td>
            <td>{{tableData[index*2-1] !== undefined ? tableData[index*2-1].value : ''}}</td>
        </tr> 
    
    </table>
</template>
 
<script>
    export default {
        data() {
            return {
                styleObject: {},
                s_showByRow: true,
            };
        },
        props: ['tableData', 'tableStyle', 'showByRow'],
        computed: {
            rowCount: function() {
                //设置为几列数据就除以几。通过td tr模拟表格
                return Math.ceil(this.tableData.length/2);
                
            },
            //进行判断两行显示图片，按个人需要，主要查看控制台的代码去修改
            isOdd() {
                return function(index) {
                    return index % 2 === 1;
                }
                }
        },
        created() {
            this.styleObject = this.tableStyle;
            if(this.showByRow !== undefined){
                this.s_showByRow = this.showByRow;
            }
        },
    }
</script>
 
<style>
        .mailTable, .mailTable tr, .mailTable tr td{ border:1px solid #E6EAEE; }
        .mailTable{ font-size: 10px; color: #71787E; width:100%; height:100%;}
        .mailTable tr td{ border:1px solid #E6EAEE; width: 15%; height: 76px; box-sizing: border-box; padding: 0 10px; }
        .mailTable tr td.column { background-color: #EFF3F6; color: #000000; }
</style>

使用组件

<el-row gutter="15" style="display: flex; color: blue; font-size: 16px;">
                <el-col :span="12">
                    <span>已登记人员</span>
                </el-col>
                </el-row>
            <el-row gutter="15">
                    <div>
                      <mail-table :tableData="tableData"></mail-table>
                    </div>
           </el-row> 
          
          
        import mailTable from '../loan-audit/tableComponent'
        export default {
        name: "loanAuditVin1",
        //引入组件
        components: {
          mailTable,
        },
    
           
       tableData: [
                    {key: '姓名', value: ''},
                    {key: '专业', value: '飞碟缔途 MX 乐享版 1.5L 108马力 汽油/CNG 3.6米单排箱式微卡(FD5030XXYD66K5-S1)'},
                    {key: '证书编号', value: 'DK15-02G/N'},
                    {key: '职称', value: 'LZOB4J25K1075944'},
                    {key: '姓名', value: ''},
                    {key: '专业', value: '飞碟缔途 MX 乐享版 1.5L 108马力 汽油/CNG 3.6米单排箱式微卡(FD5030XXYD66K5-S1)'},
                    {key: '证书编号', value: 'DK15-02G/N'},
                    {key: '职称', value: 'LZOB4J25K1075944'},
                    {key: '姓名', value: ''},
                    {key: '专业', value: '飞碟缔途 MX 乐享版 1.5L 108马力 汽油/CNG 3.6米单排箱式微卡(FD5030XXYD66K5-S1)'},
                    {key: '证书编号', value: 'DK15-02G/N'},
                    {key: '职称', value: 'LZOB4J25K1075944'},
                ],

实现一个竖直的显示表头的表格加图片（vue版本）

封装组件

使用组件

结果