element 复合表格 el-table多行合并+表格行内多列勾选

记录工作中出现的各种表格问题，用于之后此类需求能快速使用。

2020.05.15 联调提示

业务需求

1. 对重复行进行合并
2. 每行添加勾选项，建设内容若有一条勾选，则实施阶段对应行进行勾选

效果图如下

表格代码

: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

• （特别要注意！！！）：存储时请一定要给表格数据附上序号，不然回显的时候数据会乱掉。