ChuFix UI v0.2.1
开发预览 更新于 2026-05-10

KVEditor 键值对编辑器

用于编辑 HTTP headers / query params / 环境变量等键值对列表，支持启用开关、说明列、自动追加空行。

基础用法

CfKVEditor 把 KVRow[]（每行 { key, value, enabled?, description? }）渲染成可编辑表格。最末一行始终是空行 — 在空行的 key 或 value 输入字符后，组件会自动追加新的空行，永远留一行可填。点击行尾 × 删除整行。

背景
参数名参数值
条目数：2
 
<script setup lang="ts">
import { ref } from 'vue';
import { CfKVEditor, type KVRow } from '@chufix-design/vue';

const params = ref<KVRow[]>([
  { key: 'page', value: '1', enabled: true },
  { key: 'pageSize', value: '20', enabled: true },
]);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <CfKVEditor
      v-model="params"
      key-placeholder="参数名"
      value-placeholder="参数值"
    />
    <span style="font-size: 12px; color: var(--fg-3);">
      条目数：<code>{{ params.filter((r) => r.key.trim()).length }}</code>
    </span>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfKVEditor } from '@chufix-design/vue';

const params = ref<KVRow[]>([
  { key: 'page', value: '1', enabled: true },
  { key: 'pageSize', value: '20', enabled: true },
]);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <CfKVEditor
      v-model="params"
      key-placeholder="参数名"
      value-placeholder="参数值"
    />
    <span style="font-size: 12px; color: var(--fg-3);">
      条目数：<code>{{ params.filter((r) => r.key.trim()).length }}</code>
    </span>
  </div>
</template>
import { useState } from 'react';
import { CfKVEditor, type KVRow } from '@chufix-design/react';

export default function Demo() {
const [params, setParams] = useState<KVRow[]>([
  { key: 'page', value: '1', enabled: true },
  { key: 'pageSize', value: '20', enabled: true },
]);
return (
  <CfKVEditor
    value={params}
    onChange={setParams}
    keyPlaceholder="参数名"
    valuePlaceholder="参数值"
  />
);
}
import { useState } from 'react';
import { CfKVEditor } from '@chufix-design/react';

export default function Demo() {
const [params, setParams] = useState<KVRow[]>([
  { key: 'page', value: '1', enabled: true },
  { key: 'pageSize', value: '20', enabled: true },
]);
return (
  <CfKVEditor
    value={params}
    onChange={setParams}
    keyPlaceholder="参数名"
    valuePlaceholder="参数值"
  />
);
}

启用开关 + 说明列

打开 showToggle 增加最左侧的勾选列 — 关掉的行 enabled: false 留在数组里但消费方可以根据它过滤。打开 showDescription 增加末列说明输入。两列都是相互独立的可选 knob。

背景
HeaderValue说明
已启用：2
 
<script setup lang="ts">
import { computed, ref } from 'vue';
import { CfKVEditor, type KVRow } from '@chufix-design/vue';

const headers = ref<KVRow[]>([
  { key: 'Authorization', value: 'Bearer xxx', enabled: true, description: '鉴权头，每次请求带上' },
  { key: 'Accept', value: 'application/json', enabled: true, description: '声明返回 JSON' },
  { key: 'X-Trace-Id', value: 'auto', enabled: false, description: '调试用，关掉就由网关生成' },
]);
const enabledCount = computed(() => headers.value.filter((r) => r.enabled !== false && r.key.trim()).length);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <CfKVEditor
      v-model="headers"
      key-placeholder="Header"
      value-placeholder="Value"
      show-toggle
      show-description
    />
    <span style="font-size: 12px; color: var(--fg-3);">
      已启用：<code>{{ enabledCount }}</code>
    </span>
  </div>
</template>
<script setup>
import { computed, ref } from 'vue';
import { CfKVEditor } from '@chufix-design/vue';

const headers = ref<KVRow[]>([
  { key: 'Authorization', value: 'Bearer xxx', enabled, description: '鉴权头，每次请求带上' },
  { key: 'Accept', value: 'application/json', enabled, description: '声明返回 JSON' },
  { key: 'X-Trace-Id', value: 'auto', enabled, description: '调试用，关掉就由网关生成' },
]);
const enabledCount = computed(() => headers.value.filter((r) => r.enabled !== false && r.key.trim()).length);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 12px;">
    <CfKVEditor
      v-model="headers"
      key-placeholder="Header"
      value-placeholder="Value"
      show-toggle
      show-description
    />
    <span style="font-size: 12px; color: var(--fg-3);">
      已启用：<code>{{ enabledCount }}</code>
    </span>
  </div>
</template>
<CfKVEditor
value={headers}
onChange={setHeaders}
keyPlaceholder="Header"
valuePlaceholder="Value"
showToggle
showDescription
/>
<CfKVEditor
value={headers}
onChange={setHeaders}
keyPlaceholder="Header"
valuePlaceholder="Value"
showToggle
showDescription
/>

只读 / 禁用

readonly 输入框只读但仍可聚焦复制；disabled 灰显且不可聚焦。两种状态下不再渲染删除按钮，也不会自动追加新空行。

背景
readonly
键值
disabled
键值
 
<script setup lang="ts">
import { ref } from 'vue';
import { CfKVEditor, type KVRow } from '@chufix-design/vue';

const env = ref<KVRow[]>([
  { key: 'NODE_ENV', value: 'production', enabled: true },
  { key: 'API_BASE', value: 'https://api.example.com', enabled: true },
  { key: 'CACHE_TTL', value: '3600', enabled: true },
]);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 16px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">readonly</div>
      <CfKVEditor :model-value="env" readonly />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled</div>
      <CfKVEditor :model-value="env" disabled />
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { CfKVEditor } from '@chufix-design/vue';

const env = ref<KVRow[]>([
  { key: 'NODE_ENV', value: 'production', enabled: true },
  { key: 'API_BASE', value: 'https://api.example.com', enabled: true },
  { key: 'CACHE_TTL', value: '3600', enabled: true },
]);
</script>

<template>
  <div style="display:flex; flex-direction:column; gap: 16px;">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">readonly</div>
      <CfKVEditor :model-value="env" readonly />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled</div>
      <CfKVEditor :model-value="env" disabled />
    </div>
  </div>
</template>
<CfKVEditor value={env} readonly />
<CfKVEditor value={env} disabled />
<CfKVEditor value={env} readonly />
<CfKVEditor value={env} disabled />

API

属性类型默认值说明
modelValue (Vue) / value (React)KVRow[][]行数组 { key, value, enabled?, description? }
defaultValueKVRow[][]非受控初值
keyPlaceholderstring'键'表头与输入占位
valuePlaceholderstring'值'表头与输入占位
showTogglebooleanfalse显示启用开关列（写入 enabled）
showDescriptionbooleanfalse显示说明列（写入 description）
autoAppendbooleantrue末尾自动追加空行
disabled / readonlybooleanfalse整体禁用 / 只读
borderedbooleantrue边框
size'sm' | 'md' | 'lg''md'字号

事件：onChange(rows) / update:modelValue 在任意行变化或自动追加时触发，传入完整行数组。

反馈与讨论

KVEditor 键值对编辑器 的讨论

0
0 / 600
一键发送
正在加载评论...