BizKeyValueEditor 键值对编辑器

键值对配置编辑件：行增删与上移 / 下移排序、重复键即时红警、可选值类型列（string / number / boolean，导出按类型解析）、JSON 导入（粘贴对象、语法错误弹窗内提示）与复制导出。适用于请求头 / 自定义参数配置、标签元数据编辑、规则引擎变量表、低代码属性面板。与 BizEditableTable 分工：本组件管「键值对配置对象」（Record 模型、重复键校验、JSON 导入导出），EditableTable 管「数据行批量编辑」（列 schema、合计行、子表单模式）。

基础用法

键值对（2）

键值操作

v-model：{"env":"production","retries":"3"}

行增删 + v-model 对象回抛，底部实时预览 JSON。

<script setup lang="ts">
/** 基础用法：行增删 + v-model 对象回抛，底部实时预览 JSON */
import { ref } from 'vue'
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
import type { BizKeyValueRecord } from 'vue3-ep-biz-lib'

const config = ref<BizKeyValueRecord>({ env: 'production', retries: '3' })
</script>

<template>
  <div>
    <BizKeyValueEditor v-model="config" />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      v-model：{{ JSON.stringify(config) }}
    </p>
  </div>
</template>

显示代码

值类型列

键值对（3）

键值类型操作

v-model：{"retries":5,"debug":false,"host":"0.0.0.0"}

types 开启类型列：number / boolean 导出自动解析（JSON 中 5 与 false 不带引号）。

<script setup lang="ts">
/** 类型列：number / boolean 导出自动解析（JSON 预览可见 3 与 false 不再带引号） */
import { ref } from 'vue'
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
import type { BizKeyValueRecord } from 'vue3-ep-biz-lib'

const config = ref<BizKeyValueRecord>({ retries: 5, debug: false, host: '0.0.0.0' })
</script>

<template>
  <div>
    <BizKeyValueEditor v-model="config" types />
    <p style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      v-model：{{ JSON.stringify(config) }}
    </p>
  </div>
</template>

显示代码

重复键红警

键值对（2）

键值操作

把第二行键改为 path（与第一行同名）即时标红，工具条提示重复键名。

<script setup lang="ts">
/** 重复键红警：把第二行的键改成 path（与第一行同名）即时标红，工具条提示重复键名 */
import { ref } from 'vue'
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
import type { BizKeyValueRecord } from 'vue3-ep-biz-lib'

const config = ref<BizKeyValueRecord>({ path: '/api/v1', retry: '3' })
</script>

<template>
  <BizKeyValueEditor v-model="config" />
</template>

显示代码

排序

键值对（3）

键值操作

sortable 开启上移 / 下移，导出对象保持同序。

<script setup lang="ts">
/** 排序：上移 / 下移调整键顺序（导出对象保持同序） */
import { ref } from 'vue'
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
import type { BizKeyValueRecord } from 'vue3-ep-biz-lib'

const config = ref<BizKeyValueRecord>({ timeout: '30', charset: 'utf-8', cache: 'true' })
</script>

<template>
  <BizKeyValueEditor v-model="config" sortable />
</template>

显示代码

JSON 导入

键值对（0）

键值类型操作

暂无键值对，点击「添加」新增

「导入 JSON」粘贴对象一键生成行（非对象 / 语法错误在弹窗内提示）。

<script setup lang="ts">
/** JSON 导入：粘贴对象一键生成行（非对象 / 语法错误在弹窗内提示） */
import { ref } from 'vue'
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
import type { BizKeyValueRecord } from 'vue3-ep-biz-lib'

const config = ref<BizKeyValueRecord>({})
</script>

<template>
  <BizKeyValueEditor v-model="config" types />
</template>

显示代码

复制导出

键值对（3）

键值类型操作

「复制 JSON」一键复制格式化 JSON（空键行自动跳过、按类型解析）。

<script setup lang="ts">
/** 复制导出：一键复制格式化 JSON（空键行自动跳过、按类型解析） */
import { ref } from 'vue'
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
import type { BizKeyValueRecord } from 'vue3-ep-biz-lib'

const config = ref<BizKeyValueRecord>({ appid: 'wx-1024', silent: true, port: 8080 })
</script>

<template>
  <BizKeyValueEditor v-model="config" types />
</template>

显示代码

禁用只读

键值对（3）

键值类型操作

隐藏增删 / 导入复制操作，纯查看配置。

<script setup lang="ts">
/** 禁用只读回显：隐藏增删 / 导入复制操作，纯查看配置 */
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
</script>

<template>
  <BizKeyValueEditor
    :model-value="{ env: 'staging', domain: 'stg.example.com', https: true }"
    types
    disabled
  />
</template>

显示代码

长列表滚动

键值对（12）

键值操作

max-height 限高内部滚动，字段表头常驻。

<script setup lang="ts">
/** 长列表滚动：max-height 限高内部滚动，表头字段常驻 */
import { ref } from 'vue'
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
import type { BizKeyValueRecord } from 'vue3-ep-biz-lib'

const initial: BizKeyValueRecord = {}
for (let i = 1; i <= 12; i++) initial[`key_${String(i).padStart(2, '0')}`] = `value-${i}`
const config = ref(initial)
</script>

<template>
  <BizKeyValueEditor v-model="config" sortable :max-height="200" />
</template>

显示代码

change 行日志

键值对（1）

键值类型操作

change 回抛完整行结构（含 id / type），父级可做脏检查。

<script setup lang="ts">
/** change 行日志：回抛完整行结构（含 id / type），父级可做脏检查 */
import { ref } from 'vue'
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
import type { BizKeyValueRecord, BizKeyValueRow } from 'vue3-ep-biz-lib'

const config = ref<BizKeyValueRecord>({ theme: 'dark' })
const rows = ref<BizKeyValueRow[]>([])
</script>

<template>
  <div>
    <BizKeyValueEditor v-model="config" types @change="(r) => (rows = r)" />
    <p v-if="rows.length" style="margin: 8px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      行数 {{ rows.length }} · 最近行：{{ rows[rows.length - 1]?.key }} = {{ rows[rows.length - 1]?.value }}（{{ rows[rows.length - 1]?.type }}）
    </p>
  </div>
</template>

显示代码

请求头场景

键值对（4）

键值类型操作

Content-Type / Authorization 等头字段配置（布尔与数字类型混排）。

<script setup lang="ts">
/** 请求头场景：Content-Type / Authorization 等头字段配置（布尔与数字类型混排） */
import { ref } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { BizKeyValueEditor } from 'vue3-ep-biz-lib'
import type { BizKeyValueRecord } from 'vue3-ep-biz-lib'

const headers = ref<BizKeyValueRecord>({
  'Content-Type': 'application/json',
  Authorization: 'Bearer eyJhbGciOi...',
  'X-Retry': 3,
  'X-Silent': false,
})

const send = (): void => {
  ElMessage.success(`将携带 ${Object.keys(headers.value).length} 个请求头发起调用`)
}
</script>

<template>
  <div>
    <BizKeyValueEditor v-model="headers" types />
    <ElButton size="small" type="primary" plain style="margin-top: 10px" @click="send">发起调用</ElButton>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	BizKeyValueRecord	{}	键值对象（编辑即回抛新对象，空键行导出时跳过）
types	boolean	false	值类型列（string / number / boolean）
sortable	boolean	false	上移 / 下移排序按钮
importable	boolean	true	JSON 导入 / 复制工具条
max-height	number	—	行区最大高度（内部滚动）
key-placeholder	string	'键'	键输入占位
value-placeholder	string	'值'	值输入占位
disabled	boolean	false	禁用（只读回显）
size	'small' | 'default' | 'large'	'default'	尺寸

Events

事件名	参数	说明
change	(rows: BizKeyValueRow[])	行结构变化（含 id / key / value / type 完整快照）

Expose

属性/方法	说明
getRows	() => BizKeyValueRow[] 当前行快照（含空键行）
getJSON	() => string 导出格式化 JSON（按类型解析、跳过空键）

口径说明

• 回抛口径：v-model 为 Record<string, string | number | boolean>——types 关闭时全部按 string；开启后 number 行非法数字按字符串导出兜底、boolean 仅 'true' 为真。
• 防回流抖动：内部以「最近回抛序列化串」比对 props 回流，v-model 回写不会打断正在输入的行；外部整对象替换（如 JSON 导入后的另一次赋值）才会重建行。
• 重复键：仅红警提示不阻断编辑；对象导出时同名键按后行覆盖前行（JS 对象语义）。