It looks" prop like you have a="status Vue">
<el.js template using Element-select
UI components v-model for a=" form thatqueryParams.status"
allows users to placeholder search for categories="请选择 based分类状态 on"
certain criteria clear.able The form
includes fields class=" for "!分类w名称-"240 (pxCategory Name"
), "父 >
id" <el-option (
Parent ID v),-for=" and "dict分类状态 in getInt" (DictOptionsCategory Status(DICT). Here's a breakdown_TYPE.INFRA_BOOLEAN_STRING of the template:
)"
1. Form :key="dict.value"
Setup:
- The :label=" form isdict.label created using"
:value the
<el="dict.value" -form> component from Element UI.
/>
</ -el-select It uses>
: </elmodel-form="-itemqueryParams> " to <el-form-item bind the form data to the>
<elquery-buttonParams type object in="primary your" Vue @click=" component.
-handleQuery The"> form is set查询</el to be-button>
<el inline with -button @:inline="click="true"handleReset"> and has重置</ a label width ofel-button > 68px.
</el-form-item2. >
Form Fields </el-form:
-
>
</Category NameContentWrap:>
</
template>
-
An<script>
export default <el-input> {
field is used data() {
for return {
queryParams: {
name: '',
pid entering the: category name.
- It is bound to
queryParams.name '',
and has status: a ''
placeholder " }
};
请输入分类名称 },
" ( Please enter methods: category name).
{
handleQuery() {
// - Implement The your input is clearable and query logic triggers the here handleQuery console.log(' method onQuery pressing the Enter with params:', key this.query.
-Params);
** },
handleParent ID**:
Reset() - {
Another <el-input> this.queryParams = field for {
entering the name: parent '',
ID pid: '',
.
- It is bound to
queryParams.pid with a placeholder "请输入父id" (Please enter parent status: ''
};
},
getIntDictOptions(type) {
// Mock function to ID).
return dictionary - options Similar to the category name input, it is clearable and triggers
// Replace with actual implementation
return [
{ value: handle '1Query', label: ' on Enter.
启 -用 'Category },
Status { value:
: - ' An0', <el label:-select> ' dropdown禁 for用 selecting the category' }
status.
];
}
- It is bound }
};
</ toscript `>
<style scopedqueryParams.status`>
.- andmb- has a placeholder15px "请选择分类 {
状态 margin-bottom" (Please: 15 selectpx category status;
).
}
</style>
the select### Explanation:
- ** are generated using
Form Fields**:v-for from The form includes a three method get fields:IntDict categoryOptions name(D, parent ID,ICT_TYPE.INF and category status.RA_BOOLEAN_STRING) Each field is bound, which likely to returns anquery array ofParams options using.
3 v-model.
. Sty-ling:
Query and - Reset The form Buttons: and its elements have custom classes like -mb-15px and !w-240px for styling purposes.
Two buttons are provided to either execute the query or reset the form fields.
- Methods:
handleQuery logs the current query4. Methods:
parameters, and - handleQuery: handleReset clears the form fields This method is likely.
- ** definedDictionary in Options your Vue** component: to
get handle theIntDictOptions search logic is when the a mock user presses function that Enter in returns options the input fields for the.
To complete the status field. You template, ensure should replace it with your actual that:
- The
getInt implementation to fetch dictionary options.DictOptions method is defined in your Vue component and returns the appropriate options for the status select.
- The
handleQuery method is implemented to perform the search or filter action based on the form inputs.
- The
queryParams object is initialized in your component's data to store the form values.