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%'
>變更內(nèi)容</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>

主要的是要處理數(shù)據(jù)

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 = "內(nèi)容變更";
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,
}]

                })