混合字段，顾名思义就是有两个或两个以上组件组合而成的组件。因此，它们的一些属性也因所构成的组件的不同而略有不同。像一些上面介绍过的属性，不再一一介绍，比如 disabled、 width。
jtbc-field-mix
基础用法
<jtbc-field-mix columns="[{"name":"key1","type":"text","text":"关键字1"},{"name":"key2","type":"text","text":"关键字2"},{"name":"key3","type":"text","text":"关键字3"}]"></jtbc-field-mix>
columns 属性
是一个 json 字符串，它的每一项代表一个要渲染的表单组件。
- name: 表单项的字段名, 不能重复。
- type：需要渲染的表单组件类型。理论上是可渲染的所有表单型组件（如模块管理中的 40 个表单组件）。常用组件类型如： color, checkbox, radio, range, select, select2, text, textarea, number, date, datetime, star, upload, avatar, gallery, 24color-picker, flat-selector, cn-city-picker2, multi-select
- text: 字段名的名称
- extra: 是一个 json 格式的字符串，根据 type 属性值的不同，取值也略有不同。具体看对应组件的属性。其中 mode （auto | label | placeholder）用来设置字段名字的位置。如 type 如果是 text, extra 可以是: ["mode": "label"]，那么 text 字段名将会放到文本框左侧，作为 label 标签而出现。
同时这里的 columns 属性的值，也是 后台 -> 开发维护 -> 模块管理 -> 添加/编辑字段， 37号 混合字段 的值。
value 属性
设置一下它的 value 属性，同时换一个下拉框的组件，添加到里面看看是啥样子。
<jtbc-field-mix value="{"key1":2,"key2":"JTBC","key3":"CMS"}" columns="[{"name":"key1","type":"select","text":"关键字1","data":[{"value":1,"text":"选项一"},{"value":2,"text":"选项二"}]},{"name":"key2","type":"text","text":"关键字2"},{"name":"key3","type":"text","text":"关键字3"}]"></jtbc-field-mix>
value 是一个 json 字符串。也是表单提交时，此组件值的数据结构。
jtbc-field-multi
多行混合字段
<jtbc-field-multi text="{"add":"添加内容","remove":"删除","removeTips":"确定要删除吗？"}" columns="[{"name":"key1","type":"text","text":"关键字1"},{"name":"key2","type":"text","text":"关键字2"}]"></jtbc-field-multi>
- text 组件上的语言属性，默认是英语。可以通过此属性设置为中文。
- columns 与 jtbc-field-mix 的 columns 属性相同。
value 属性
<jtbc-field-multi value="[{"key1":"JTBC","key2":"CMS"},{"key1":"二姨","key2":"妈"}]" columns="[{"name":"key1","type":"text","text":"关键字1"},{"name":"key2","type":"text","text":"关键字2"}]"></jtbc-field-multi>
jtbc-field-multi-group
多行分组混合字段
<jtbc-field-multi-group group="[{"name":"group1","text":"分组一","columns":[{"name":"key1","type":"text","text":"\u5173\u952e\u5b571"},{"name":"key2","type":"text","text":"\u5173\u952e\u5b572"}]},{"name":"group2","text":"分组二","columns":[{"name":"key1","type":"text","text":"\u5173\u952e\u5b571"},{"name":"key2","type":"text","text":"\u5173\u952e\u5b572"}]}]"></jtbc-field-multi-group>
- text：object, 组件内语言属性。如：{"add": "添加", "remove": "删除", "removeTips": "确认删除吗？"}
- group：object，组件内项目数据。如：[{"name": "group1", "text": "分组1", "columns":[{"name": "name1", "type": "text", "text": "字段名1", "extra":{"mode":"label"}}]},]
- value：组件值
value 属性
<jtbc-field-multi-group value="[{"group_name":"group1","key1":"JTBC","key2":"CMS"},{"group_name":"group2","key1":"二姨","key2":"妈"}]" group="[{"name":"group1","text":"分组一","columns":[{"name":"key1","type":"text","text":"关键字1"},{"name":"key2","type":"text","text":"关键字2"}]},{"name":"group2","text":"分组二","columns":[{"name":"key1","type":"text","text":"关键字1"},{"name":"key2","type":"text","text":"关键字2"}]}]"></jtbc-field-multi-group>
jtbc-field-table
表格混合字段
<jtbc-field-table text="{"add":"添加","remove":"删除","removeTips":"确定删除吗？","emptyTips":"目前还没有内容，请点击加号按钮添加。","dblClickRemoveTips":"再次单击以删除"}" columns="[{"name":"color","type":"color","text":"色系"},{"name":"images","type":"gallery","text":"图集"}]"></jtbc-field-table>
- text：object, 组件内文本提示。如：{"add":"添加","remove":"删除","removeTips":"确定删除吗？","emptyTips":"目前还没有内容，请点击加号按钮添加。","dblClickRemoveTips":"再次单击以删除"}
- columns：object，组件内项目数据
- value：组件值
- disabled：组件是否可用
- width：组件宽度
value 属性
<jtbc-field-table value="[{"color":"#e66465","images":"[{\"fileurl\":\"/common/upload/jtbcdocs/2025/06/09/234747m1.png\"},{\"fileurl\":\"/common/upload/jtbcdocs/2025/06/09/234747m1.png\"}]"},{"color":"#f6b73c","images":"[{\"fileurl\":\"/common/upload/jtbcdocs/2025/06/09/234747m1.png\"}]"}]" columns="[{"name":"color","type":"color","text":"色系"},{"name":"images","type":"gallery","text":"图集"}]"></jtbc-field-table>
jtbc-field-table 组件默认是不能渲染 jtbc-filed-gallery 组件的，需要修改 jtbc-field-table 组件源码，把 gallery 添加到渲染列表
jtbc-filed-gallery 组件中的图片预览，暂不可用。上传图片也不可用，没有添加后台处理程序。
dblmode 属性
组件上加上 dblmode 用于设置双击删除项目。
<jtbc-field-table dblmode columns="[{"name":"color","type":"color","text":"色系"},{"name":"images","type":"gallery","text":"图集"}]"></jtbc-field-table>
事件
- tradded 添加新的项目后触发
- trremoved 删除项目后触发