Element-Ui常见样式及问题

合计行要缩小页面才出现

.el-table{
  overflow:visible !important;
}

合并单元格（最右列合计）

<el-table-column label="2022入库年度含水率控制区间" align="center" >
          <el-table-column label=" 含水率（%）" width="120 " align="center">
            <el-table-column prop="orgName" label="产区" width="150" align="center">
              <template slot-scope="{ row }">
                <span class="lookInfoButton" @click="goToDetailPage">{{ row.orgName }}</span>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column prop="range782To999" label="7.82-9.99" align="center"></el-table-column>
          <el-table-column prop="range1050" label="≦10.50" align="center"></el-table-column>
          <el-table-column prop="range1051To1099" label="10.51-10.99" align="center"></el-table-column>
          <el-table-column prop="range1100To1199" label="11.00-11.99" align="center"></el-table-column>
          <el-table-column prop="range1200To1299" label="12.00-13.00" align="center"></el-table-column>
          <el-table-column prop="range1300To1349" label="13.00-13.49" align="center"></el-table-column>
          <el-table-column prop="range1349To1710" label=">13.49-17.10" align="center"></el-table-column>
          <el-table-column label="合计" align="center">
            <template slot-scope="scope">
              {{
                scope.row.range782To999 + scope.row.range1050
                + scope.row.range1051To1099 + scope.row.range1100To1199
                + scope.row.range1200To1299 + scope.row.range1300To1349
                + scope.row.range1349To1710
              }}
            </template>
          </el-table-column>
        </el-table-column>

合并合计行前几列

 watch: {
    tableData: {
      immediate: true,
      async handler() {
        //await this.$nextTick(); 根据实际选择延迟调用
        //在这里找到合计行 
        const tds = document.querySelectorAll('.el-table__footer .has-gutter tr>td');
        tds[0].colSpan = 4;//设置合计行第一个单元格占的列数
        tds[0].style.textAlign = 'center'
        tds[1].style.display = 'none'
        tds[2].style.display = 'none'
        tds[3].style.display = 'none'
      }
    }
  },

去掉表格鼠标移入字体颜色改变的问题

/deep/ .el-table tbody tr:hover > td {
  color: white !important;
}

表格的样式(标题行 表格内 背景色透明)

/*最外层透明*/
.regional_table /deep/ .el-table,
.regional_table /deep/ .el-table__expanded-cell {
  background-color: transparent;
}
/* 标题行样式 */
.regional_table /deep/ .el-table th {
  background-color: transparent !important;
  color: #FFF !important;
  font-size: 20px;
  height: 50px !important;
  border: 1px solid #30c0b4 !important;
}

/* 表格内样式 */
.regional_table /deep/ .el-table tr,
.regional_table /deep/ .el-table td {
  background-color: transparent !important;
  border: 1px solid #30c0b4;
  color: #FFFFFF;
}