10、vue表格Table数据展示，隔行不同色效果_vue两行数据做比对,不同时变色

vue表格Table数据展示，隔行不同色效果

页面代码
只能单向进行数据绑定，并不能从页面修改数据获得

<template>
  <div class='class-table'>
    <div class='table-wrapper'>
      <div class='tabel-container'>
        <table>
          <thead>
            <tr>
              <th class="null"></th>
              <th v-for='(title, index) in titles' :key='index' :class="{ cretateTime:index == 0 }"> {{ title }}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for='(item, index) in simulatedData' :key='index' :class="'tr-color-' + index % 2">
              <td class="null"></td>
              <td>{{item.createdate}}</td>
              <td>{{item.name[1]}}**</td>
              <td>{{item.type}}</td>
              <td>{{item.principal}}</td>
              <td>{{item.state == 1?'已处理':'未处理'}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      titles: ['创建时间', '姓名', '类型', '负责人', '状态'],
      simulatedData: [
        {
          createdate: '2021-11-10 08:32:23',
          name: '陈奇偶',
          type: '健康变化',
          principal: '薛舒淇',
          state: 0
        },
        {
          createdate: '2021-11-10 08:32:23',
          name: '阳欧式',
          type: '健康变化',
          principal: '记语文',
          state: 1
        },
        {
          createdate: '2021-11-10 08:32:23',
          name: '巴特斯',
          type: '健康变化',
          principal: '结搜到',
          state: 0
        },
        {
          createdate: '2021-11-10 08:32:23',
          name: '陈刀片',
          type: '健康变化',
          principal: '曾破山',
          state: 0
        }
      ]
    }
  },
  created () {
  },
  methods: {
  }
}
</script>

<style lang='less' scoped>
@color3:rgba(17, 98, 107, 0.3);
@color5:rgba(17, 98, 107, 0.7);
@bordercolor:rgb(36, 152, 165);
.class-table {
  .table-wrapper {
    width: 100%;
    height: 100%;
    overflow: auto;
  }
  .tabel-container {
    margin: 7px;
    width: 90%;
    margin: auto;
    margin-top: 30px;
    border: 1px solid @bordercolor;
    table {
      // table-layout: fixed;
      width: 100%;
      // 去除表格的默认边框
      border-spacing: 0px;
      border-collapse: collapse;
      thead {
        background-color: @color5;
        th {
          color: #fff;
          line-height: 17px;
          font-weight: normal;
          height: 65px;
          padding: 12px 2px;
          font-size: 30px;
          text-align: center;
        }
        .cretateTime {
          width: 150px;
        }
      }

      tbody {
        // 不同行不同背景色
        .tr-color-0 {
          background: rgba(255, 255, 255, 0);
        }
        .tr-color-1 {
          background: @color3;
        }
        td {
          color: #ffffff;
          line-height: 55px;
          width: 60px;
          padding: 12px 2px;
          font-size: 27px;
          text-align: center;
        }
      }
      .null {
        width: 20px;
      }
    }
  }
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135