element表格列合并、⾏合并、表头合并以及⾃定义校验规则和表格内部form表
单的校验
element表格列合并、⾏合并、表头合并
话不多说，先上图！
⾸先咱们可以看到⼀个⽐较复杂的表格，在element的基本使⽤中是不到这种情况的。这张截图只是截了⼀点，没有截图完全。
可以看上⾯这张图，每⼀个红框就是⼀个el-table-column，你可以根据你的项⽬看看需要多少个。
横着框的这⼏个相邻单元格的table-column的名称为了区别我们尽量将他们定义为⼀样得名称。
objectSpanMethod({row, column, rowIndex, columnIndex }){
// console.log(row, column)
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
if(rowIndex ===0&& columnIndex ===0){
//  0，0是从第⼀个单元格开始，需要注意的是，他是不考虑表头的，也就是我们第⼀张图上的损失情况和路基的交汇处。
return{
rowspan:14,//要合并的⾏数
colspan:1
}
}
}
if(rowIndex !==0&& rowIndex !==14&& columnIndex ===0){
return{
rowspan:0,//要合并的⾏数
colspan:0
}
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/
/ 好，现在看我们的波浪线区间的这两块代码
// 先看0，0的情况，我们是吧0，0单元格的⾏数给他扩展到了14⾏，那么如果没有下⾯那个if判断条件语句的话表格会多出来14⾏
// 因此我们需要把2-14⾏的row⾏数把他置为0，这样第15⾏就会回到本该呆在的位置，表格也不会突出⼀部分。
// 后⾯的这些也是万变不离其宗，也是我合并的其他单元格，⼤家看看就好。
if(rowIndex ===14&& columnIndex ===0){
return{
rowspan:4,//要合并的⾏数
colspan:1
}
}
if(
(rowIndex ===0|| rowIndex ===6|| rowIndex ===7|| rowIndex >9)&&
columnIndex ===1
){
return{
rowspan:1,
colspan:2
}
}
if(
(rowIndex ===0|| rowIndex ===6|| rowIndex ===7|| rowIndex >9)&&
columnIndex ===2
){
return{
rowspan:0,
colspan:0
}
}
if(rowIndex ===1&& columnIndex ===1){
return{
rowspan:3,
colspan:1
}
}
if(rowIndex >1&& rowIndex <4&& columnIndex ===1){
return{
rowspan:0,
colspan:0
}
}
if((rowIndex ===4|| rowIndex ===8)&& columnIndex ===1){
return{
rowspan:2,
colspan:1
}
}
if((rowIndex ===5|| rowIndex ===9)&& columnIndex ===1){
return{
rowspan:0,
colspan:0
}
}
}
好的，这样的话我们的表格内容的⾏和列就合并完成了，但是表头的合并还没有做，这个⽅法也获取
不到表头单元格，然后我去了⼀下element的⽂档，发现也没有说明，只是告诉了嵌套表头的⽅法，最后还是依靠着原⽣JS解决问题！
// 获取表头的所有单元格
var x = ElementsByClassName('el-table__header')[0].rows[0].cells
// 将第⼆列表头单元格的colSpan设为2
x[0].colSpan =3
x[4].colSpan =2
x[6].colSpan =2
// 将第三列表头单元格的display设为none
x[1].style.display ='none'
x[2].style.display ='none'
x[5].style.display ='none'
x[7].style.display ='none'
好了，这点代码我想就不⽤多说了，对各位⼤神来说那是so easy 啦，我也是第⼀次做这种表格，所以没到有什么特别好的⽅法，只是把我怎么实现的写出来了，如果有更简单的⽅法希望可以留⾔讨论⼀下。
⾃定义校验规则和表格内部的表单校验
相信⼤家做系统的时候也会遇到这种表格内部输⼊框的问题，平常的表单校验是⽐较简单的，element都给写好了，那么这种表格内部的表单是怎么校验的呢我们⼀起看⼀看。
// 这⾥为了清晰明了看见我们就准备了⼀个el-table-item，
// 通过view我们是可以看到table外⾯是需要⼀个form表单包裹着的，并且在数据⾥⾯我们table渲染所需要的数组也是放在form表单⾥⾯的。
// 其次就是注意看form的model和table的data的写法。
<el-form
:model="dataForm"
:rules="dataRule"
label-width="90px"
ref="dataForm"
size="mini"
>
<el-table
:data="portWeekWaterInfoDTO"
border
:span-method="objectSpanMethod"
>
/
/ 好的，form和table的架⼦搭好了，就可以定义需要校验的字段了。
// 我们看下⾯的el-form-item这块，写了prop和rules两个属性通过表格的scope.$index来区分每⾏的同⼀个字段名
// 再从下⽅的datarules⾥⾯写好对应的校验规则即可。
<el-table-column
header-align="center"
align="center"
label="灾毁数量"
>
<template slot-scope="scope">
<el-form-item
label-width="0"
:prop="
'reportWeekWaterInfoDTO.'+ scope.$index +'.damageCount2'
"
:rules="dataRule.damageCount2"
v-if="
"
>
<el-input
v-model="w.damageCount2"js合并两个数组
></el-input></el-form-item
><span v-else>-</span>
</template>
</el-table-column></el-table
>
>
</el-form>
// data部分
data(){
const isMoney=(rule, value, callback)=>{
const percent =/^\d*(?:\.\d{0,10})?$/
if(!st(value)){
return callback(new Error('必须为数字类型')) }else{
callback()
}
}
return{
visible:false,
dataForm:{
// Edit: 'add',
id:undefined,
organizeId:undefined,
startTime:'',
endTime:'',
reportWeekWaterInfoDTO:[
{
date:'⽴⽅⽶/公⾥',
type:'损失情况',
type1:'路基',
itemName:'路基',
itemCode:1,
damageCount:0,
damageCount2:0,
waterDamageCount:0,
waterDamageCount2:0,
damageAmount:0,
waterDamageAmount:0
},
{
date:'平⽅⽶/公⾥',
type:'损失情况',
type1:'路⾯',
itemName:'沥青路⾯',
itemCode:2,
damageCount:0,
damageCount2:0,
waterDamageCount:0,
waterDamageCount2:0,
damageAmount:0,
waterDamageAmount:0
},
{
date:'平⽅⽶/公⾥',
type:'损失情况',
type1:'路⾯',
itemName:'⽔泥路⾯',
itemCode:3,
damageCount:0,
damageCount2:0,
waterDamageCount:0,
waterDamageCount2:0,
damageAmount:0,
waterDamageAmount:0
},
{
date:'平⽅⽶/公⾥',
type:'损失情况',
type1:'路⾯',

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。