mergeTable 合并表格

特殊表格合并抽离方案
只需要传入数据,和指定合并的行和列的key值
合并规则是:当指定有 key 合并,合并过程中需要有连续的 value 值相等才能合并
合并 k1-k4 列
eg 数据:v1,v1,v12,v1
所有列都要合并的时候,只会合并到
v1,v12,v1

eg:v1,v1,v1,v1
那么全部合并成果
只会有一列出现 v1

:::top
需要注意的是,顺序强相关
:rowKey="['一级', '二级', '三级', '汇总', '二次汇总']"
:colKey="['序号', '一级', '二级', '备注', '汇总', '二次汇总']"
:::

基础用法

<!--  -->
<template>
  <div class="">
    <jp-merge-table
      :tableData="list"
      :tableColumn="tableColumn"
      :rowKey="['一级', '二级', '三级', '汇总', '二次汇总']"
      :colKey="['序号', '一级', '二级', '汇总', '二次汇总']"
    >
      <el-table-column label="备注" slot="remark" width="40">
        <template slot-scope="scope">
          <div>
            <!-- {{ scope.row['备注'] }}--自定义 -->
            <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
              <i class="el-icon-question"></i>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </jp-merge-table>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      tableColumn: [
        { label: '序号', prop: '序号' },
        { label: '一级', prop: '一级' },
        { label: '二级', prop: '二级' },
        { label: '三级', prop: '三级' },
        { label: '初值', prop: '初值' },
        { label: '汇总', prop: '汇总' },
        { label: '二次汇总', prop: '二次汇总' },
        { label: '比例', prop: '比例' },
        { label: '备注', prop: '备注', slot: 'remark' }
      ],
      list: [
        {
          序号: 1,
          一级: '月度支出占比-%',
          二级: '月度支出占比-%',
          三级: '月度支出占比-%',
          初值: 3.01,
          汇总: '1',
          二次汇总: 'ff',
          比例: '',
          备注: ''
        },
        {
          序号: 2,
          一级: '月度工单总量',
          二级: '月度工单总量',
          三级: '月度工单总量',
          初值: 10,
          汇总: '2',
          二次汇总: 'ff',
          比例: '',
          备注: ''
        },
        { 序号: 3, 一级: '客诉类型', 二级: '客户原因', 三级: '客户原因', 初值: 2, 汇总: 5, 二次汇总: 4, 比例: '', 备注: '备注一样' },
        { 序号: 3, 一级: '客诉类型', 二级: '绝配原因', 三级: '100万', 初值: '2', 汇总: '100万', 二次汇总: '100万', 比例: '', 备注: '备注一样' },
        { 序号: 3, 一级: '客诉类型', 二级: '绝配原因', 三级: '配', 初值: 1, 汇总: '100万', 二次汇总: '100万', 比例: '', 备注: '' },
        { 序号: 4, 一级: '工单类型', 二级: '营运工单', 三级: '管理工单', 初值: 8, 汇总: 24, 二次汇总: 2, 比例: '3', 备注: '生产SKU数目' },
        { 序号: 4, 一级: '工单类型', 二级: '营运工单', 三级: '开发工单', 初值: 4, 汇总: 22, 二次汇总: 2, 比例: '4', 备注: '生产SKU数目' },
        { 序号: 5, 一级: '盘点差异', 二级: '库存准确率', 三级: '库存准确率', 初值: 13, 汇总: '', 二次汇总: '5', 比例: '', 备注: '' },
        { 序号: 6, 一级: '理赔金额', 二级: '下游赔付', 三级: '质', 初值: 1500.0, 汇总: 0.0, 二次汇总: 1500.0, 比例: '', 备注: '' },
        { 序号: 6, 一级: '理赔金额', 二级: '下游赔付', 三级: '量', 初值: 1200.0, 汇总: 0.0, 二次汇总: 1200.0, 比例: '', 备注: '' },
        { 序号: 6, 一级: '理赔金额', 二级: '下游赔付', 三级: '仓', 初值: 800.0, 汇总: 0.0, 二次汇总: 800.0, 比例: '', 备注: '' },
        {
          序号: 7,
          一级: '原因归类',
          二级: '月度工单量产生比例最高类别',
          三级: '',
          初值: '',
          汇总: '',
          二次汇总: '54.00%',
          比例: '生产原因',
          备注: '生产管理类额最高'
        },
        {
          序号: 7,
          一级: '原因归类',
          二级: '月度工单量产生比例次高类别',
          三级: '',
          初值: '',
          汇总: '',
          二次汇总: '30.00%',
          比例: '绝配原因',
          备注: ''
        }
      ]
    }
  },

  mounted() {},
  methods: {}
}
</script>
<style scoped lang="scss"></style>

显示代码