Element-Ui常见样式及问题

目录

合计行要缩小页面才出现

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

合并合计行前几列

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

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

表单校验在编辑完成后再新增的话会出现校验不符合规则

抽屉去除默认header后Form中的第一个item如果是日期时间选择器则会自动展开

表格加载数据后默认选中第一行

自定义表单校验规则

---

---

合计行要缩小页面才出现

.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;
}

表单校验在编辑完成后再新增的话会出现校验不符合规则

关闭表单/清除表单信息的时候
this.$refs.form.resetFields();

抽屉去除默认header后Form中的第一个item如果是日期时间选择器则会自动展开

:with-header="true" :show-close="false"
总归为显示头，但是让高度和内边框啥的都为0，不显示出来就可以解决自动展开的问题

withHeader	控制是否显示 header 栏, 默认为 true, 
当此项为 false 时, title attribute 和 title slot 均不生效

一下三个都看试一下，注意scoped
.el-drawer__header{
  padding: 0!important;
  margin: 0!important;
}
/deep .el-drawer__header{
  padding: 0!important;
  margin: 0!important;
}
>>> .el-drawer__header{
  padding: 0!important;
  margin: 0!important;
}

表格加载数据后默认选中第一行

 <el-table size="mini"
                    ref="srsTable"
                    :data="center.tableData.data"
                    v-loading="loadtable"
                    element-loading-text="拼命加载中..."
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.08)"
                    border
                    tooltip-effect="light"
                    highlight-current-row   //关键是这个
                    v-on:current-change="srsSeleced"
                    @selection-change="srsSelectionChange"
                    style="width:100%;"
                    @row-click="rowClick"
                    height="95%">

//  在加载表格数据的方法的地方加上
//设置表格当前选中行,配置了 highlight-current-row 属性，那么这一行会被高亮显示
system.$refs['srsTable'].setCurrentRow(res.Data[0]);
//设置当前选中的行的数据
system.center.tableData.selected = res.Data[0];

自定义表单校验规则

        endTime: [{required: 'date', message: '请选择作业结束时间', trigger: 'change'}, {
          validator: (rule, value, callback) => {
            if (value < this.form.startTime) {
              console.log(this.form.startTime, "开始时间")
              console.log(value, "结束时间")
              callback(new Error('结束时间不能早于开始时间'));
            } else {
              console.log(this.form.startTime, "开始时间")
              console.log(value, "结束时间")
              callback();
            }
          }
        }],