Skip to content

fix(query-builder): document supplement #3814

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 20, 2025
Merged

fix(query-builder): document supplement #3814

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 17 additions & 14 deletions examples/sites/demos/pc/app/query-builder/webdoc/query-builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,21 @@ export default {
},
desc: {
'zh-CN': `
<div class="tip custom-block">
<p class=\"custom-block-title\"> config 属性说明 </p>
<code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为----- \n <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为----- \n <code>disabled</code>：禁用所有规则 \n <code>parseNumbers</code>：数字会被转化为 Number 类型，而非 String 类型 \n <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制 \n <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现 \n <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定 \n <code>showNotToggle</code>：展示 not 条件切换框 \n <code>displayOnlyField</code>：是否仅展示字段选择器 \n </div> \n 二、fields 数据配置 \n <pre> <code>\n fields 中的数据（只用于说明各字段含义，无业务特定性） \n { \n name: 'isMusician', //name：格式化数据中的值（形参） \n label: 'Is a musician', //label：范围域在规则生成器中对外展示名称 \n valueEditorType: 'checkbox', //placeholder：值域的默认缺省值 \n operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称 \n { \n name: '=', \n label: '=' \n } \n ], \n bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制 \n input:{ \n clearable:true \n }, \n select:{ \n filterable:true \n } \n }, \n defaultValue: false, //defaultOperator：运算符的默认缺省选择 \n validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……） \n inputType: 'number', //值域的数值类型 \n valueEditorType: 'radio' //值域编辑器的类型 \n defaultValue: false, //值域的默认值 \n values: [ //值域的可选域配置（下拉） \n { \n label: 'Percussion instruments', \n options: [ \n { \n name: 'Clapstick', \n label: 'Clapstick' \n } \n ] \n } \n ], \n values: [ //值域的可选域配置（单选） \n { \n name: 'M', \n label: 'Male' \n }, \n { \n name: 'F', \n label: 'Female' \n }, \n { \n name: 'O', \n label: 'Other' \n } \n ], \n valueSources: ['field', 'value'], //值域类型可选择 \n comparator: 'groupNumber', //分组时的比较器 \n groupNumber: 'group1', //分组的组别 \n }, \n // 组合子数组配置，label 为展示字符，name 为数据值 \n combinators: [ \n { \n name: 'and', \n label: '且' \n }, \n { \n name: 'or', \n label: '或' \n } \n ] \n </code></pre> <br>`,
'en-US': ''
<code>config</code>属性说明，<code>autoSelectField</code>：范围域是否会默认选择，勾选则默认为第一个选项；反之则默认为----- \n <code>autoSelectOperator</code>：运算符是否会默认选择，勾选则默认选择第一个选项，反之则默认为----- \n <code>disabled</code>：禁用所有规则 \n <code>parseNumbers</code>：数字会被转化为 Number 类型，而非 String 类型 \n <code>showCloneButtons</code>：展示复制按钮，即整条规则可以被复制 \n <code>showCombinatorsBetweenRules</code>：组合子数组统一修改，且不再展示在连线上，以下拉选择形式出现 \n <code>showLockButtons</code>：展示锁定按钮，即整条规则可以被锁定 \n <code>showNotToggle</code>：展示 not 条件切换框 \n <code>displayOnlyField</code>：是否仅展示字段选择器 \n </div> \n fields 数据配置 \n <pre> <code>fields 中的数据（只用于说明各字段含义，无业务特定性） \n { \n name: 'isMusician', //name：格式化数据中的值（形参） \n label: 'Is a musician', //label：范围域在规则生成器中对外展示名称 \n valueEditorType: 'checkbox', //placeholder：值域的默认缺省值 \n operators: [ //运算符自定义，name 为格式化数据中的值，label 为范围域对外展示的名称 \n { \n name: '=', \n label: '=' \n } \n ], \n bindProps: { // 通过 bindProps 参数可对某一类组件进行参数控制 \n input:{ \n clearable:true \n }, \n select:{ \n filterable:true \n } \n }, \n defaultValue: false, //defaultOperator：运算符的默认缺省选择 \n validator: (r) => !!r.value //validator：校验规则（该功能点还在迭代开发中……） \n inputType: 'number', //值域的数值类型 \n valueEditorType: 'radio' //值域编辑器的类型 \n defaultValue: false, //值域的默认值 \n values: [ //值域的可选域配置（下拉） \n { \n label: 'Percussion instruments', \n options: [ \n { \n name: 'Clapstick', \n label: 'Clapstick' \n } \n ] \n } \n ], \n values: [ //值域的可选域配置（单选） \n { \n name: 'M', \n label: 'Male' \n }, \n { \n name: 'F', \n label: 'Female' \n }, \n { \n name: 'O', \n label: 'Other' \n } \n ], \n valueSources: ['field', 'value'], //值域类型可选择 \n comparator: 'groupNumber', //分组时的比较器 \n groupNumber: 'group1', //分组的组别 \n }, \n // 组合子数组配置，label 为展示字符，name 为数据值 \n combinators: [ \n { \n name: 'and', \n label: '且' \n }, \n { \n name: 'or', \n label: '或' \n } \n ] \n </code></pre> <br>`,
'en-US': `<code>config</code> Attribute Description, <code>autoSelectField</code>: Whether the range field is automatically selected by default. If checked, the first option will be selected by default; otherwise, it defaults to ----- <code>autoSelectOperator</code>: Whether the operator is automatically selected by default. If checked, the first option will be selected by default; otherwise, it defaults to ----- <code>disabled</code>: Disable all rules <code>parseNumbers</code>: Numbers will be converted to the Number type, not the String type <code>showCloneButtons</code>: Display copy buttons, allowing the entire rule to be copied <code>showCombinatorsBetweenRules</code>: Uniformly modify the combinator array, which no longer appears on the connection line but instead appears as a dropdown selection <code>showLockButtons</code>: Display lock buttons, allowing the entire rule to be locked <code>showNotToggle</code>: Display the not condition toggle box <code>displayOnlyField</code>: Whether only the field selector is displayed. \n fields data configuration \n<pre><code>Data in fields (only used to explain the meaning of each field, no business specificity) \n {\n name: 'isMusician',//name: values (formal parameters) in formatted data \n label: 'Is a musician',//label: the external display name of the range field in the rule generator \n valueEditorType: 'checkbox',//placeholder: the default value of the value field \n operators: [//operator customization, name is the value in formatted data, label is the external display name of the range field \n {\n name: '=', \n label: '=' \n} \n], \n BindProps: {//The bindProps parameter can be used to control the parameters of a certain type of component\n input:{ \n clearable:true \n }, \n select:{ \n filterable:true \n } \n }, \n defaultValue: false, //defaultOperator： The default selection for operators is validator: (r)=>!! r. Value//validator: validation rules (this feature is still under iterative development...) \n inputType: 'number',//numeric type of value range \n valueEditorType: 'radio'//type of value range editor \n defaultValue: false,//default value of value range \n values: [//optional range configuration of value range (drop-down))\n { \n label: 'Percussion instruments', \n options: [ \n { \n name: 'Clapstick', \n label: 'Clapstick' \n } \n ] \n } \n ], \n values: [//Optional field configuration for value range (single choice)\n { \n name: 'M', \n label: 'Male' \n }, \n { \n name: 'F', \n label: 'Female' \n }, \n { \n name: 'O', \n label: 'Other' \n } \n ], \n valueSources: ['field', 'value'], //The range type can be selected as \n comparator:'groupNumber ',//comparator for grouping \n groupNumber:'group1',//grouping group \n}, \n//combination subarray configuration, label is the display character, name is the data value \n combiners: [\n {\n name: 'and', \n label: 'and' \n}, \n {\n name: 'or', \n label: 'or' \n} \n] \n</code></press><br>`
Copy link

@coderabbitai coderabbitai bot Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Correct property name case and closing tag in en-US block.

BindProps should remain camelCased as bindProps, otherwise the doc instructs a non-existent option. The same string ends with </press>, which breaks the HTML block. Please fix both.

Apply this diff to address the issues:

-        'en-US': `<code>config</code> Attribute Description,  ... BindProps: {//The bindProps parameter ...\n</code></press><br>`
+        'en-US': `<code>config</code> Attribute Description,  ... <code>bindProps</code>: {//The <code>bindProps</code> parameter ...\n</code></pre><br>`

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/query-builder/webdoc/query-builder.js around line
14, change the incorrect property name BindProps to camelCase bindProps in the
en-US string and replace the erroneous closing tag </press> with the correct
</pre> to properly close the code block.

},
codeFiles: ['basic-usage.vue']
},
{
demoId: 'display-only-field',
name: {
'zh-CN': '简易模式',
'en-US': 'Basic'
'en-US': 'Simple Mode'
},
desc: {
'zh-CN': 'config 配置添加 displayOnlyField 属性，开启简易模式仅展示字段选择器功能',
'en-US': ' '
'zh-CN': '<code>config</code>配置添加<code>displayOnlyField</code>属性，开启简易模式仅展示字段选择器功能',
'en-US':
'<code>config</code>Configure to add<code>showOnlyField</code>attribute, enable simple mode to only display field selector function'
Copy link

@coderabbitai coderabbitai bot Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Attribute name typo in en-US translation.

The English description tells users to set <code>showOnlyField</code>, but the actual option is displayOnlyField. This mismatch will cause the feature to fail for readers following the doc. Please align the attribute name.

Apply this diff to fix the typo:

-          '<code>config</code>Configure to add<code>showOnlyField</code>attribute, enable simple mode to only display field selector function'
+          '<code>config</code>Configure to add<code>displayOnlyField</code>attribute, enabling simple mode to only display the field selector'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
'<code>config</code>Configure to add<code>showOnlyField</code>attribute, enable simple mode to only display field selector function'
'<code>config</code>Configure to add<code>displayOnlyField</code>attribute, enabling simple mode to only display the field selector'
🤖 Prompt for AI Agents 
In examples/sites/demos/pc/app/query-builder/webdoc/query-builder.js around line
27, the en-US string mistakenly references the attribute name
<code>showOnlyField</code> while the actual option is displayOnlyField; update
the translation text to reference displayOnlyField (replace "showOnlyField" with
"displayOnlyField") so the docs match the real API and users won't be misled.

},
codeFiles: ['display-only-field.vue']
},
Expand All @@ -36,8 +35,10 @@ export default {
'en-US': 'Basic'
},
desc: {
'zh-CN': 'fields 数组配置项中存在 children 子数据项，则开启树型字段选择器功能，配置示例如下',
'en-US': ' '
'zh-CN':
'<code>fields</code>数组配置项中存在<code>children</code>子数据项，则开启树型字段选择器功能，配置示例如下',
'en-US':
'If there is a <code>children</code> sub-item in the <code>fields</code> array configuration, the tree-type field selector function will be enabled. The configuration example is as follows'
},
codeFiles: ['tree-field.vue']
},
Expand All @@ -49,8 +50,9 @@ export default {
},
desc: {
'zh-CN':
'添加 max-height 属性设置组件最大高度，超出内容显示滚动条，属性值支持 数值 和 数值 + 单位，如 500、500px、50rem 等。',
'en-US': ' '
'添加<code>max-height</code>属性设置组件最大高度，超出内容显示滚动条，属性值支持 数值 和 数值 + 单位，如 500、500px、50rem 等。',
'en-US':
'Add <code>max-height</code> attribute to set the maximum height of the component. If the content exceeds the limit, a scroll bar will be displayed. The attribute value supports both numeric and numeric + unit, such as 500, 500px, 50rem, etc.'
},
codeFiles: ['max-height.vue']
},
Expand Down Expand Up @@ -90,8 +92,9 @@ export default {
},
desc: {
'zh-CN':
'config 配置添加 bindProps 属性可控制某一类组件的参数，中间操作符类组件暂不支持传参，具体配置见以下说明： \n<div class="tip custom-block">\n<p class="custom-block-title"> bindProps 属性说明 </p>\nleftSelect：左侧 Select 参数，统一控制左侧所有 Select \nselect：右侧 Select 参数 \ninput：输入框参数，包括 textarea \nnumeric：计数器 \ndate：日期选择器 \ntime：时间选择器 \nradio：单选框 \ncheckbox：多选框 \n</div> \n',
'en-US': ' '
'<code>config</code> 配置添加<code>bindProps</code>属性可控制某一类组件的参数，中间操作符类组件暂不支持传参，具体配置见以下说明： \n<div class="tip custom-block">\n<p class="custom-block-title"> <code>bindProps</code> 属性说明 </p>\n <code>leftSelect</code>：左侧 <code>Select</code> 参数，统一控制左侧所有 <code>Select</code> , 右侧 <code>Select</code> 参数：<code>input</code>输入框，包括 <code>textarea</code> \n<numeric>：计数器 \n<date>：日期选择器 \n<time>：时间选择器 \n<radio>：单选框 \n<checkbox>：多选框 \n</div> \n',
'en-US':
'<code>config</code> Configure to add <code>bindProps</code> attribute to control the parameters of a certain type of component. The middle operator type component does not support parameter passing for the time being. See the following description for specific configuration: \n<div class="tip custom-block">\n<p class="custom-block-title"> <code>bindProps</code> Attribute Description </p>\n <code>leftSelect</code>: Left <code>Select</code> parameters, uniformly control all left <code>Select</code>, right <code>Select</code> parameters: <code>input</code> input box, including <code>textarea</code> \n<numeric>: counter \n<date>: date picker \n<time>: time picker \n<radio>: radio button \n<checkbox>: checkbox \n</div> \n'
},
codeFiles: ['sub-component-param.vue']
},
Expand All @@ -103,7 +106,7 @@ export default {
},
desc: {
'zh-CN':
'高级模式，用法详见示例:<br> \n 自定义组件必须实现:<strong> value</strong>属性和<strong>change</strong>事件，<br> \n <strong>自定义组件的其他额外属性：</strong><br> \n data-id: string，数据 ID <br> \n operator: string, 操作符<br> \n filed-name: string, 字段名 <br> \n path: Array<number> 字段在 queryBuilder 中的父子路径，<br> \n key: to| from',
'高级模式，用法详见示例:<br> \n 自定义组件必须实现:<code> value</code>属性和<code>change</code>事件，<br> \n <code>自定义组件的其他额外属性：</code><br> \n <code>data-id: string</code>，数据 ID <br> \n <code>operator: string</code>, 操作符<br> \n <code>filed-name: string</code>, 字段名 <br> \n <code>path: Array<number> </code>字段在 <code>queryBuilder</code> 中的父子路径，<br> \n<code> key: to| from</code>',
'en-US': ' '
},
codeFiles: ['advanced-mode.vue']
Expand Down
Loading