vue 之表格的隔行变色 之合并行 与表头两列_vue 表头一行占两列

vue 之表格的隔行变色 之合并行

html

<template>
  <div class="payment_c">
    <div class="pament_container">
      <div class="tab_sec">
        <el-table
          :data="tableList"
          class="table_content"
          height="calc(100% - 30px)"
          border
          :row-class-name="tableRowClassName"
          :span-method="objectSpanMethod"
          :header-cell-style="headerColor"
          style="width: 100%"
        >
          <el-table-column
            label="XXX"
            width="97"
            prop="industry"
            align="center"
          >
            <template slot-scope="scope">
              <div
                :style="
                  'height:' +
                  scope.row.industrycount * 40 +
                  'px;line-height:' +
                  scope.row.industrycount * 48 +
                  'px'
                "
                :class="
                  scope.row.industrynumber % 2 === 0
                    ? 'blue text_ellipsis'
                    : 'white text_ellipsis'
                "
              >
                {{ scope.row.industry }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="custname"
            label="XXX"
            :show-overflow-tooltip="true"
            width="217"
          >
            <template slot-scope="scope">
              <div
                :style="
                  'height:' +
                  scope.row.custnamecount * 40 +
                  'px;line-height:' +
                  scope.row.custnamecount * 48 +
                  'px'
                "
                :class="
                  scope.row.custnamenumber % 2 === 0
                    ? 'white text_ellipsis'
                    : 'blue text_ellipsis'
                "
              >
                {{ scope.row.custname }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="statusName"
            align="center"
            :show-overflow-tooltip="true"
            label="XXX"
            width="112"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>
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

js

<script>
import requestRes from "@/utils/res_request.js";
export default {
  data() {
    return {
      tableList: [],//表格
    };
  },
  created() {
    this.init('2020-10-31', 1);
  },
  methods: {
    // 获取数据
    init(
      time = "",
      unit = 1,
      industry = "",
      pageNum = 1,
      pageSize = 20
    ) {
      this.$request
        .get(
          `XXX接口?time=${time}&unit=${unit}&pageNum=${pageNum}&pageSize=${pageSize}&industrys=${industry}`
        )
        .then((res) => {
          console.log('res',res);
          let res1 = requestRes(res.data, this.$router);
          if (res1.count > 0) {
            this.tableList = this.$tableDataChange.listHandle(res1.list);
          } else {
            this.tableList = [];
          }
          this.total = res1.count;
        });
    },
    listHandle(list) {
      return this.$listHandle(list);
    },
    //合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (columnIndex === 0) {
        if (row.industrycount > 1) {
          return {
            rowspan: row.industrycount,
            colspan: 1,
          };
        } else if(row.industrycount === 1){
          return {
            rowspan: 1,
            colspan: 1,
          };
        }else{
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      if (columnIndex === 1) {
        if (row.custnamecount > 1) {
          return {
            rowspan: row.custnamecount,
            colspan: 1,
          };
        } else if (row.custnamecount === 1) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    // 给头部添加样式
    headerColor({ rowIndex, columnIndex }) {
      return this.$headerColor.headerColor(rowIndex);
    },
    // 表格斑马纹
    tableRowClassName({ row, rowIndex }) {
      return this.$tableRowClassName.tableRowClassName(rowIndex);
    },
  },
};
</script>
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

请求中的数据 以及方法解析

• 初始的res 里面的数组数据

[
  {
    custname: "XXX 有限公司",
    custnamecount: 2, //公司合并的行
    custnamenumber: 0, 
    industry: "SXXX"
    industrycount: 3, //产业合并的行
    industrynumber: 0,
  }
]
1
2
3
4
5
6
7
8
9
10

• listHandle 方法 处理后的数据

function listHandle(list) {
    for (var key in list[0]) {
      var k = 0;
      var j = 0;
      while (k < list.length) {
        list[k][key + "count"] = 1;
        list[k][key + 'number'] = j;
        for (var i = k + 1; i <= list.length - 1; i++) {
          if (list[k][key] == list[i][key] && list[k][key] != "") {
            list[k][key + "count"]++;
            list[i][key + "count"] = 0;
            list[i][key + 'number'] = j;
          } else {
            break;
          }
        }
        j++
        k = i;
      }
    }
    return list;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

• 对表格头添加样式

const headerColor = function(rowIndex) {
    if (rowIndex === 0) {
      return { background: "#e92323", color: "#fff" };
    } else {
      return { background: "#133890", color: "#fff" };
    }
  }
const tableRowClassName = function(rowIndex) {
    if (rowIndex % 2 === 0) {
      return "bg";
    } else {
      return "bgnone";
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

CSS

<style scoped lang="scss">
.payment_table_container {
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
}
.pament_title {
  width: 307px;
}
.pament_header_left .pament_header_searchForm {
  height: 236px;
}
::v-deep .el-table {
  td {
    padding: 0px !important;
  }
}
::v-deep .el-table__body-wrapper{
  height: 87% !important;
}
::v-deep .el-table{
    td{
        padding:0px;
    }
}
::v-deep .el-table__row{
    &>td:nth-child(1){
      padding: 0!important;
      .el-tooltip{
        padding: 0!important;
      }
      .cell{
        padding: 0!important;
      }
    }
    &>td:nth-child(2){
      padding: 0!important;
      .el-tooltip{
        padding: 0!important;
      }
      .cell{
        padding: 0!important;
      }
    }
  }
// 表格样式
::v-deep .el-table {
  font-size: 14px;

  // font-family: SourceHanSansCN-Bold, SourceHanSansCN;
  th {
    padding: 3px 0px;
    text-align: center;
    font-size: 18px;

    .is-leaf {
      border: none;
    }
  }

  td {
    padding: 10px 0px;
    border-bottom: none;

    .is-leaf {
      border: none;
    }
  }
}

.blue {
  background: #d5dffc;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;

}

.white {
  background: #fff;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 10px;

}

::v-deep .bg {
  background: #d5dffc !important;
}

::v-deep .bgnone {
  background: #fff !important;
}
</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

表头两列

      <el-table-column label="1 经营性额度" align="center">
        <el-table-column
          label=" 经营性额度小计"
          width="200"
          prop="jyxed"
          :show-overflow-tooltip="true"
          align="right"
        >
        </el-table-column>
        <el-table-column
          label="1.1 流贷"
          width="200"
          prop="jyxed1"
          :show-overflow-tooltip="true"
          align="right"
        >
    <el-table-column  />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17