合并单元格(vxe版)

最近遇到一个问题

需求是 三张表  一对多对一的关系

用到的技术 vue vxetable mybatis 

需要让它显示在一个表格中并且合并单元格

思路：

后端：利用resultMap进行关系映射 形成父子关系

<resultMap type="RtProbProblemAccount" id="RtProbProblemAccountResult">
        <result property="problemId" column="problem_id"/>
        <result property="accountId" column="suc_account_id"/>
        <result property="inventId" column="invent_id"/>
        <result property="problemNo" column="problem_no"/>
        <result property="rectUnit" column="rect_unit"/>
        <result property="problemStatus" column="problem_status"/>
        <result property="preparedBy" column="prepared_by"/>
        <result property="preparedDate" column="prepared_date"/>
        <result property="problemTypeId" column="problem_type_id"/>
        <result property="problemType" column="problem_type"/>
        <result property="otherProblems" column="other_problems"/>
        <result property="title" column="title"/>
        <result property="describe" column="describe"/>
        <result property="problemOccurUnit" column="problem_occur_unit"/>
        <result property="qualitativeBasis" column="qualitative_basis"/>
        <result property="auditOpinion" column="audit_opinion"/>
        <result property="duty" column="duty"/>
        <result property="importance" column="importance"/>
        <result property="problemDiscoveryTime" column="problem_discovery_time"/>
        <result property="riskQualitative" column="risk_qualitative"/>
        <result property="auditProblemMajor" column="audit_problem_major"/>
        <result property="auditProblemSubclass" column="audit_problem_subclass"/>
        <result property="involveAmount" column="involve_amount"/>
        <result property="problemFinder" column="problem_finder"/>
        <result property="problemDiscoveryNumber" column="problem_discovery_number"/>
        <result property="auditDiscoveryType" column="audit_discovery_type"/>
        <result property="violationAmount" column="violation_amount"/>
        <result property="violationType" column="violation_type"/>
        <result property="orderNum" column="order_num"/>
        <result property="whCancel" column="wh_cancel"/>
        <result property="createBy" column="create_by"/>
        <result property="createTime" column="create_time"/>
        <result property="updateBy" column="update_by"/>
        <result property="updateTime" column="update_time"/>
        <result property="remark" column="remark"/>
        <result property="delFlag" column="del_flag"/>
    </resultMap>

    <resultMap type="RtRectMeasure" id="RtRectMeasureResult">
        <result property="measureId" column="measure_id"/>
        <result property="planId" column="plan_id"/>
        <result property="problemId" column="problem_id"/>
        <result property="rectMeasures" column="rect_measures"/>
        <result property="proHappenReason" column="pro_happen_reason"/>
        <result property="rectTargetResult" column="rect_target_result"/>
        <result property="reviewComments" column="review_comments"/>
        <result property="rectLeader" column="rect_leader"/>
        <result property="rectContact" column="rect_contact"/>
        <result property="methodCompletion" column="method_completion"/>
        <result property="planCompleteDate" column="plan_complete_date"/>
        <result property="actualCompleteDate" column="actual_complete_date"/>
        <result property="orderNum" column="order_num"/>
        <result property="createBy" column="create_by"/>
        <result property="createTime" column="create_time"/>
        <result property="updateBy" column="update_by"/>
        <result property="updateTime" column="update_time"/>
        <result property="remark" column="remark"/>
        <result property="delFlag" column="del_flag"/>
        <association property="historical"  javaType="com.guhg.rt.domain.RtRectFeedbackHistorical" resultMap="RtRectFeedbackHistoricalResult" />
    </resultMap>

    <resultMap type="RtRectFeedbackHistorical" id="RtRectFeedbackHistoricalResult">
        <result property="historicalId"    column="historical_id"    />
        <result property="feedbackId"    column="feedback_id"    />
        <result property="accountId"    column="account_id"    />
        <result property="projectId"    column="project_id"    />
        <result property="measureId"    column="measure_id"    />
        <result property="feedbackNumber"    column="feedback_number"    />
        <result property="feedbackDate"    column="feedback_date"    />
        <result property="rectUnit"    column="rect_unit"    />
        <result property="unitName"    column="unit_name"    />
        <result property="year"    column="year"    />
        <result property="feedbackStatus"    column="feedback_status"    />
        <result property="rectFeedback"    column="rect_feedback"    />
        <result property="rectProofDescribe"    column="rect_proof_describe"    />
        <result property="methodCompletion"    column="method_completion"    />
        <result property="actualCompletionDate"    column="actual_completion_date"    />
        <result property="whAdopt"    column="wh_adopt"    />
        <result property="noAdoptReason"    column="no_adopt_reason"    />
        <result property="undoneReason"    column="undone_reason"    />
        <result property="continueMeasures"    column="continue_measures"    />
        <result property="orderNum"    column="order_num"    />
        <result property="createBy"    column="create_by"    />
        <result property="createTime"    column="create_time"    />
        <result property="updateBy"    column="update_by"    />
        <result property="updateTime"    column="update_time"    />
        <result property="remark"    column="remark"    />
        <result property="delFlag"    column="del_flag"    />
    </resultMap>

    <resultMap id="RtProbProblemAccountRtRectMeasureResult" type="RtProbProblemAccount"
                           extends="RtProbProblemAccountResult">
    <association property="rtRectMeasures" notNullColumn="measure_id" javaType="com.guhg.rt.domain.RtRectMeasure"
                resultMap="RtRectMeasureResult"/>
</resultMap>

 <select id="queryProblemByProblemId" parameterType="String" resultMap="RtProbProblemAccountRtRectMeasureResult">
        select a.problem_id, a.account_id as suc_account_id, a.invent_id, a.problem_no, a.rect_unit, a.problem_status, a.prepared_by, a.prepared_date, a.problem_type_id, a.problem_type, a.other_problems, a.title, a.describe, a.problem_occur_unit, a.qualitative_basis, a.audit_opinion, a.wh_cancel,
  b.*,
  c.*
      from rt_prob_problem_account a
        left join rt_rect_measure b
		on b.problem_id = a.problem_id
		left join rt_rect_feedback_historical c
		on b.measure_id = c.measure_id
        where a.account_id = #{accountId}
</select>

注：因为我们需求是合并单元格 查询时结果会有很多一致的字段 而mybatis会自动把一致的字段合并起来 需要让查询出来数据的自带一个主键 让mybatis不去合并我们一致的数据 从而查询出所有的数据

前端：

        这里是vxe的表格合并

在vxe的表头定义合并方法

 // 通用行合并函数（将相同多列数据合并为一行）
      rowspanMethod({row, _rowIndex, column, visibleData}) {
      // 对象中什么字段需要合并就往后面填写
      let fields = ['problemStatus','title','problemOccurUnit','whCancel']
      // 拿到一行中所有列中的值
      // 一行中只要problemNo属性值一样 就合并
      let cellValue = row['problemNo']
      if (cellValue && fields.includes(column.property)) {
        let prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        // 一行中只要problemNo属性值一样 就合并
        if (prevRow && prevRow['problemNo'] === cellValue) {
          return {rowspan: 0, colspan: 0}
        } else {
          let countRowspan = 1
            // 一行中只要problemNo属性值一样 就合并
          while (nextRow && nextRow['problemNo'] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return {rowspan: countRowspan, colspan: 1}
          }
        }
      }
    },

 方法还有很多 会的可以分享一下