记录工作中出现的各种表格问题，用于之后此类需求能快速使用。
2020.05.15 联调提示
业务需求
- 对重复行进行合并
- 每行添加勾选项，建设内容若有一条勾选，则实施阶段对应行进行勾选
效果图如下
表格代码
:span-method=“objectJBXXMethod” 对表格进行多列合并的方法
:header-cell-style=”{background:’#deebff’,color:’#606266’}” 给表头换色
height=“calc(90vh – 140px)” 根据页面的高度，对表格进行自适应调整，90vh(页面90%高度) – 140px（除了表格之外的占比）
建设内容中change=”contentChange”方法：实现业务2需求
<el-table :data="JZPFData" ref="JZPFData" v-loading="JZPFData_loading" border
:span-method="objectJBXXMethod" height="calc(90vh - 140px)"
:header-cell-style="{background:'#deebff',color:'#606266'}" highlight-current-row>
<el-table-column prop="projectStage" label="项目阶段" min-width="120">
<template slot-scope='scope'>
<el-checkbox :disabled="allDisabled" v-model="scope.row.projectCheck"
@change="projectStageChange(scope.row,scope.row.projectCheck)">
</el-checkbox>
{ { scope.row.projectStage}}
</template>
</el-table-column>
<el-table-column prop="implementation" label="实施阶段" min-width="120">
<template slot-scope='scope'>
<el-checkbox :disabled="allDisabled" v-model="scope.row.implementationCheck" @change="aaaa">
</el-checkbox>
{ { scope.row.implementation}}
</template>
</el-table-column>
<el-table-column prop="content" label="建设内容" min-width="180">
<template slot-scope='scope'>
<el-checkbox :disabled="allDisabled" v-model="scope.row.contentCheck"
@change="contentChange(scope.row,scope.row.contentCheck)"></el-checkbox>
{ { scope.row.content}}
</template>
</el-table-column>
<el-table-column type="index" label="序" min-width="60" align="center"></el-table-column>
<el-table-column prop="begintime" label="开始/申报时间" min-width="120">
<template slot-scope='scope'>
<el-date-picker v-model="scope.row.begintime" type="date" size="mini"
v-if="!allDisabled && scope.row.begintimeAble" placeholder="选择日期"
@change="beginTimeChange(scope.row)" format="yyyy-MM-dd" value-format="timestamp">
</el-date-picker>
<div v-else v-html="formatter({begintime:scope.row.begintime},{property:'begintime'})"></div>
</template></el-table-column>
<el-table-column prop="endtime" label="结束/批复时间" min-width="120">
<template slot-scope='scope'>
<el-date-picker v-model="scope.row.endtime" type="date" size="mini"
v-if="!allDisabled && scope.row.endtimeAble" @change="endTimeChange(scope.row)"
placeholder="选择日期" format="yyyy-MM-dd" value-format="timestamp"> </el-date-picker>
<div v-else v-html="formatter({endtime:scope.row.endtime},{property:'endtime'})"></div>
</template></el-table-column>
<el-table-column prop="title" label="批复标题" min-width="120">
<template slot-scope='scope'>
<el-input v-model="scope.row.title" v-if="!allDisabled" size="mini"></el-input>
<div v-else>{ { scope.row.title}}</div>
</template>
</el-table-column>
<el-table-column prop="documentNum" label="批复文号" min-width="120">
<template slot-scope='scope'>
<el-input v-model="scope.row.documentNum" v-if="!allDisabled" size="mini"></el-input>
<div v-else>{ { scope.row.documentNum}}</div>
</template>
</el-table-column>
<el-table-column prop="unit" label="批复单位" min-width="120">
<template slot-scope='scope'>
<el-input v-model="scope.row.unit" v-if="!allDisabled" size="mini"></el-input>
<div v-else>{ { scope.row.unit}}</div>
</template>
</el-table-column>
<el-table-column prop="summary" label="内容摘要" min-width="120">
<template slot-scope='scope'>
<el-input v-model="scope.row.summary" v-if="!allDisabled" size="mini"></el-input>
<div v-else>{ { scope.row.summary}}</div>
</template>
</el-table-column>
<el-table-column prop="value1" label="上传/查看" min-width="120">
<template slot-scope='scope'>
<el-button type="primary" plain size="mini">上传</el-button>
<el-button type="primary" plain size="mini">查看</el-button>
</template>
</el-table-column>
</el-table>
表格数据例如
data(){
return{
JZPFData: [{
itemStage: "审批",
implementStage: "*规划",
content: "***",
endtime: "2020",
begintimeAble: true,
endtimeAble: false,
}, {
itemStage: "审批",
implementStage: "*规划",
content: "***",
endtime: "2020"
begintimeAble: true,
endtimeAble: true,
}{
itemStage: "审批",
implementStage: "*规划",
content: "***",
endtime: "2020",
begintimeAble: true,
endtimeAble: true,
}, {
itemStage: "审批",
implementStage: "*建议书",
content: "***",
begintime: "2019",
endtime: "2020",
begintimeAble: true,
endtimeAble: true,
}, {
itemStage: "审批",
implementStage: "*规模",
content: "***",
begintime: "2019",
endtime: "2020",
begintimeAble: true,
endtimeAble: false,
}, {
itemStage: "审批",
implementStage: "*报告",
content: "***",
begintime: "2019",
endtime: "2020",
begintimeAble: true,
endtimeAble: true,
}, {
itemStage: "审批",
implementStage: "*报告",
content: "***",
begintime: "2019",
endtime: "2020",
begintimeAble: true, //是否需要编辑
endtimeAble: false, //是否需要编辑
}]
}
}
合并表格（method）
getJBXXTableData() {
let spanOneArr = [],
spanTwoArr = [],
concatOne = 0,
concatTwo = 0;
this.JZPFData.forEach((item, index) => {
if (index === 0) {
spanOneArr.push(1);
spanTwoArr.push(1);
} else {
if (item.itemStage === this.JZPFData[index - 1].itemStage) { //第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
} else {
spanOneArr.push(1);
concatOne = index;
};
if (item.implementStage === this.JZPFData[index - 1].implementStage) { //第二列和第16列需合并相同内容的判断条件
spanTwoArr[concatTwo] += 1;
spanTwoArr.push(0);
} else {
spanTwoArr.push(1);
concatTwo = index;
};
}
});
return {
one: spanOneArr,
two: spanTwoArr
}
},
objectJBXXMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (columnIndex === 0) {
const _row = (this.getJBXXTableData(this.JZPFData).one)[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if (columnIndex === 1 || columnIndex === 15) {
const _row = (this.getJBXXTableData(this.JZPFData).two)[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
若子级若有一条勾选，则父级对应行进行勾选（contentChange方法）
//选择一条建设内容,则前面的实施阶段则勾选上
contentChange(row,checkVal){
// 判断建设内容勾选了几条，如果勾选条数大于0则勾选，否则移除
let checkNum=0;
this.JZPFData.forEach(item => {
if(item.implementStage==row.implementStage){
checkNum+=item.contentState?1:0;
}
// 将建设内容勾选条对应的实施阶段进行勾选
if(item.implementStage==row.implementStage && checkVal){
item.implementStageState=true;
}
})
// 将建设内容整组未勾选的实施阶段进行去掉
this.JZPFData.forEach(item => {
if(item.implementStage==row.implementStage && checkNum<=0){
item.implementStageState=false;
}
})
},
联调注意
后端需要添加check状态的字段： projectCheck ； implementationCheck ； contentCheck
若某行的某个时间可以编辑，则添加状态判断
– 后端添加字段存储状态 begintimeAble ； endtimeAble
查看或编辑时，要将状态进行处理为true，false
（特别要注意！！！）：存储时请一定要给表格数据附上序号，不然回显的时候数据会乱掉。
