DataDiffMergeTable 表格对比组件 API

Props

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | titles | Array<String> | ['', ''] | 左右对比表头标题 | | leftData | Array | [] | 左侧原始数据 | | rightData | Array | [] | 右侧原始数据 | | primaryKeys | Array<String> | [] | 主键字段列表，用于左右数据行对齐与对比 | | columns | Array | [] | 列定义，至少包含 prop label width | | height | String | "28vh" | 左右对比表高度 | | mergeHeight | String | "28vh" | 合并表高度 | | align | String | "center" | 列内容对齐方式，可选：left / center / right | | rowDiffBgColor | String | "#5513137F" | 差异/缺失行背景色 | | diffCellTextColor | String | "#d9001b" | 差异单元格字体色 | | isUseMerge | Boolean | false | 是否使用合并功能 |

columns 配置项（ColumnItem）

| 字段 | 类型 | 必填 | 说明 | |------|------|------|------| | prop | string | 是 | 对应数据字段名 | | label | string | 是 | 列标题 | | width | string | number | 否 | 列宽 |

Emits

| 事件名 | 参数 | 触发时机 | 说明 | |--------|------|----------|------| | merge-change | Array<object> | 合并表数据变化时 | 返回合并表当前数据（含用户编辑） | | selection-change | Record<string, "left" | "right" | null> | 选择状态变化时 | 返回每行选择状态映射 |

merge-change 数据项格式

| 字段 | 说明 | |------|------| | __key | 行唯一键（由 primaryKeys 拼接） | | __side | 当前来源侧，left 或 right | | ...columns.prop | 合并表实际可编辑字段值 |

交互规则

• 一行数据只能选择左或右，互斥
• 选择"某侧全选"后，会锁定该侧，另一侧禁选
• 取消锁定全选后，恢复默认选中策略
• 默认选中策略：
  • 仅一侧有数据，默认选有数据侧
  • 两侧都有数据，默认选"数据量更多的一侧"
• 合并表主键列只读，不允许编辑
• 左/右/合并三张表纵向与横向滚动同步
• hideSameRows=true 时，对比区隐藏 same 行，但合并数据仍按当前选择生成

使用示例

<script setup name="TelWorkLogDown">
/**
 * @author zhaoheng
 * @description 对比合并组件（子组件）
 */
import {ref} from "vue";
import DataDiffMergeTable from "@/views/payloadMonitor/telemetry/components/DataDiffMergeTable.vue";

/**
 * @author zhaoheng
 * @description 左右表头标题
 */
const titles = ref(["左边数据", "右边数据"]);

/**
 * @author zhaoheng
 * @description 表格列配置
 * label: 列名
 * prop: 字段名（需与数据字段一致）
 */
const columns = ref([
  {label: "主键", prop: "id"},
  {label: "名称", prop: "name"},
  {label: "年龄", prop: "age"}
]);

/**
 * @author zhaoheng
 * @description 主键字段（用于左右数据行对齐）
 */
const primaryKeys = ref(["id"]);

/**
 * @author zhaoheng
 * @description 左侧原始数据
 */
const leftData = [
  {id: 0, name: "张三", age: 18},
  {id: 1, name: "张三", age: 18},
  {id: 2, name: "李四", age: 20},
  {id: 4, name: "张三", age: 18},
  {id: 5, name: "张三", age: 18}
];

/**
 * @author zhaoheng
 * @description 右侧原始数据
 */
const rightData = [
  {id: 0, name: "张三", age: 18},
  {id: 1, name: "王五", age: 22},
  {id: 2, name: "张三", age: 19},
  {id: 4, name: "李四", age: 18}
];

/**
 * @author zhaoheng
 * @description 合并表数据变化回调
 * @param {Array} val - 当前合并表最终数据（包含用户编辑结果）
 */
function onMergeChange(val) {
  console.log(val);
}
</script>

<template>
  <div>
    <!--
      @author zhaoheng
      @description 对比合并主组件
      isUseMerge=true: 开启合并模式（复选框 + 合并表 + merge-change）
    -->
    <DataDiffMergeTable
      :titles="titles"
      :left-data="leftData"
      :right-data="rightData"
      :primary-keys="primaryKeys"
      :columns="columns"
      height="28vh"
      merge-height="28vh"
      align="center"
      row-diff-bg-color="#5513137F"
      diff-cell-text-color="#d9001b"
      :isUseMerge="true"
      @merge-change="onMergeChange"
    />
  </div>
</template>

<style scoped lang="scss">
/**
 * @author zhaoheng
 * @description 页面样式（当前无自定义样式）
 */
</style>