目录
抽屉去除默认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();
}
}
}],