跳转到内容

键值列表 KvList

KvList 用于编辑有序键值对,同时提供 JSON 数组和 Bulk 文本两个模型。它适合请求 Header、密钥配置和通用配置项等场景。

不传 type 时,键和值都使用 Input。修改任意模型都会同步另一侧;条目顺序和重复键会被保留。

http-header 使用 AutoComplete 编辑键,并内置常用 HTTP Header;secret 使用 InputPassword 编辑值,并默认隐藏 Bulk 编辑入口,避免在界面中明文展示密钥。

keyPropsvalueProps 会直接透传给对应字段组件。KvList 始终接管 modelValueupdate:modelValue,其他属性可以按需覆盖,包括 placeholder、readonly、allowClear 和 maxLength。

使用 keyvalue 作用域插槽替换内置字段。插槽提供 valueitemindex、合并后的 propsupdate;调用 update 才会同步两个模型。

参数 描述 类型 默认值
v-model:json 有序键值对数组,支持重复键 KvListItem[] []
v-model:bulk Key: Value 格式的多行文本 string ''

当两个模型首次传入的内容冲突时,非空的 json 优先。空键不会写入模型;Bulk 模式忽略空行,并以每行第一个冒号分隔键和值。

参数 描述 类型 默认值
type 内置字段类型 'http-header' | 'secret' undefined
keyProps 透传给键字段的属性 KvListKeyProps -
valueProps 透传给值字段的属性 KvListValueProps -
disabled 禁用字段编辑、排序、增删、清空和 Bulk 编辑 boolean false
bulkEditable 是否显示 Bulk 编辑入口;secret 默认关闭,其他类型默认开启 boolean 根据 type 自动判断

插槽优先于 typekeyProps/valueProps 中的 modelValuedefaultValueonUpdate:modelValue 不属于可透传 API。

字段 描述 类型
key string
value string
插槽 描述 参数
key 自定义键字段 { value, item, index, props, update }
value 自定义值字段 { value, item, index, props, update }
toolbar-extra 工具栏尾部的扩展操作 -
row-actions 每行删除按钮前的扩展操作 { item: Readonly<KvListItem>, index: number }