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:
<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.
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: '',
.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.
];
}the select### Explanation:
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.
handleQuery logs the current query4. Methods:
parameters, and - handleQuery: handleReset clears the form fields This method is likely.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:
getInt implementation to fetch dictionary options.DictOptions method is defined in your Vue component and returns the appropriate options for the status select.handleQuery method is implemented to perform the search or filter action based on the form inputs.queryParams object is initialized in your component's data to store the form values.