表格样式

image.png

使用的是elementui
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th
rowspan="2"
width='10%'
>操作人员</th>
<th
rowspan="2"
width='10%'
>操作时间</th>
<th
rowspan="2"
width='10%'
>变更类型</th>
<th
rowspan="2"
width='10%'
>对比</th>
<th
colspan="5"
width='60%'
>变更内容</th>
</tr>
<tr>
<th>姓名</th>
<th>职务</th>
<th>职级</th>
<th>分工</th>
<th>生效时间</th>
</tr>
</thead>
<tbody>
<template v-for="item in changeData">
<tr>
<td :rowspan="item.date.length">{{item.user_name}}</td>
<td :rowspan="item.date.length">{{item.time}}</td>
<td :rowspan="item.date.length">{{item.type}}</td>

                                <td>{{item.date[0].before}}</td>
                                 <td
                                    v-show="item.type==='新增人员'"
                                    colspan="4"
                                >无</td>

                                <td  v-show="item.type!='新增人员'">{{item.date[0].baforeNmae}}</td>
                                <td  v-show="item.type!='新增人员'">{{item.date[0].baforePosition}}</td>
                                <td  v-show="item.type!='新增人员'">{{item.date[0].beforeZj}}</td>
                                <td  v-show="item.type!='新增人员'">{{item.date[0].beforeWork?item.date[0].beforeWork:'暂无'}}</td>
                                <td :rowspan="item.date.length">{{item.time}}</td>
                            </tr>
                            <tr v-for="son in item.date.length-1">

                                <td>{{item.date[son].after}}</td>
                                <td
                                    v-show="item.type==='删除人员'"
                                    colspan="4"
                                >无</td>
                                <td v-show="item.type!='删除人员'">{{item.date[son].afterNmae}}</td>
                                <td v-show="item.type!='删除人员'">{{item.date[son].afterPosition}}</td>
                                <td v-show="item.type!='删除人员'">{{item.date[son].afterZj}}</td>
                                <td v-show="item.type!='删除人员'">{{item.date[son].afterWork?item.date[son].afterWork:'暂无'}}</td>
                            </tr>
                        </template>
                    </tbody>
                </table>

主要的是要处理数据

image.png

this.changeData.forEach((element, index, arr) => {
switch (this.changeData[index].type) {
case 1:
this.changeData[index].type = "新增人员";
break;
case 2:
this.changeData[index].type = "删除人员";
break;
case 3:
this.changeData[index].type = "内容变更";
break;
}
arr[index].date = [
{ before: '前', baforeNmae: arr[index].before_leader_name, baforePosition: arr[index].before_position, beforeZj: arr[index].before_zj_name, beforeWork: arr[index].before_work_content }, {
afterNmae: arr[index].after_leader_name, after: '后', afterPosition: arr[index].after_position, afterZj: arr[index].after_zj_name, afterWork: arr[index].after_work_content,
}]

                })