采用动态拼接展示方法,在筛选条件标签和输入框中间添加“筛选方式”下拉框,根据所选筛选方式,输入框个数动态变化
时间: 2024-04-15 08:28:39 浏览: 77
输入框下拉筛选
如果你想在筛选条件标签和输入框之间添加一个"筛选方式"下拉框,并根据所选筛选方式动态改变输入框的个数,你可以按照以下步骤进行操作:
1. 在你的组件中,定义一个数组来存储筛选条件和输入框的配置信息。每个配置对象包含标签、输入框类型和输入框个数等信息。
```javascript
data() {
return {
filterOptions: [
{ label: '条件1', type: 'text', count: 1 },
{ label: '条件2', type: 'text', count: 1 },
{ label: '条件3', type: 'text', count: 1 }
],
selectedOption: null
}
}
```
2. 在模板中,使用`el-select`组件来展示"筛选方式"下拉框,并绑定`selectedOption`来获取用户选择的筛选方式。
```html
<el-select v-model="selectedOption" placeholder="请选择筛选方式">
<el-option v-for="(option, index) in filterOptions" :key="index" :label="option.label" :value="option"></el-option>
</el-select>
```
3. 添加一个计算属性来根据用户选择的筛选方式动态生成对应数量的输入框。
```javascript
computed: {
inputFields() {
if (this.selectedOption) {
const count = this.selectedOption.count;
return Array.from({ length: count }, (_, index) => index);
}
return [];
}
}
```
4. 在模板中,使用`v-for`指令来循环渲染生成的输入框。
```html
<template>
<div>
<el-select v-model="selectedOption" placeholder="请选择筛选方式">
<el-option v-for="(option, index) in filterOptions" :key="index" :label="option.label" :value="option"></el-option>
</el-select>
<el-form :model="form" label-width="80px">
<el-form-item v-for="index in inputFields" :key="index" :label="`输入框${index + 1}`">
<el-input v-model="form[`input${index + 1}`]"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
```
在上述代码中,`inputFields`计算属性根据用户选择的筛选方式动态生成对应数量的输入框。然后,通过`v-for`指令循环渲染生成的输入框。
这样,当用户选择不同的筛选方式时,输入框的个数会根据选择的筛选方式动态改变。
希望这个示例能满足你的需求。如果你有任何其他问题,请随时提问!
阅读全文