《Input+Dropdown-Model》

前言:

       重复的工作没有必要人工一直来做,可以形成模板,提高前端开发效率。

正文: 

Input

<div class="form-group">
      <label>{{'dataModelInfo.modelName' | translate}}:</label>
      <!-- input框 start-->
      <input type="text" name="modelName" class="form-control" placeholder="请输入模型名称" [(ngModel)]="modelName">
      <!--end  -->
</div>
Dropdown
<div class="form-group">
      <label>{{'dataModelInfo.modelType' | translate}}:</label>
      <!-- 下拉框 start-->
          <select class="form-control" name="modelType" [(ngModel)]="examinationId" (change)="changeModelType($event.target.value)">
            <option >---------请选择模型类别-----------</option>
            <option *ngFor="let option of data" [value]="option.id">{{option.modelType}}</option>
          </select>
      <!-- end -->
</div>

结语:

       单纯的重复问题解决以后,便有了时间和精力去做精致的事情。


要在 van-dropdown-menu 中添加搜索框,您可以按照以下步骤进行操作: 1. 在 van-dropdown-menu 组件中添加一个输入框,并设置输入框的位置和样式。 2. 监听输入框的变化事件,并将输入框的值传递给一个方法。 3. 在方法中根据输入框的值过滤下拉菜单中的选项,并将过滤后的选项重新渲染到下拉菜单中。 4. 当用户选择一个选项时,关闭下拉菜单并将选项的值传递给父组件。 下面是一个示例代码: ```html <van-dropdown-menu> <van-dropdown-item v-model="selectedOption"> <template #title> <input type="text" v-model="searchText" placeholder="搜索..." /> </template> <van-dropdown-menu-item v-for="option in filteredOptions" :key="option" :value="option" > {{ option }} </van-dropdown-menu-item> </van-dropdown-item> </van-dropdown-menu> <script> export default { data() { return { options: ['选项A', '选项B', '选项C', '选项D'], selectedOption: '', searchText: '', }; }, computed: { filteredOptions() { return this.options.filter((option) => { return option.toLowerCase().includes(this.searchText.toLowerCase()); }); }, }, }; </script> ``` 在这个示例中,我们使用了 van-dropdown-menu 和 van-dropdown-item 组件来创建下拉菜单。我们还在 van-dropdown-item 组件的标题中添加了一个输入框,并将其值绑定到了 searchText 变量上。 在 computed 属性中,我们创建了一个名为 filteredOptions 的计算属性,该属性根据 searchText 过滤 options 数组中的选项。我们在 van-dropdown-menu-item 组件中使用过滤后的选项来渲染下拉菜单中的选项。 最后,我们将选项的值绑定到了 selectedOption 变量上,以便将其传递给父组件。
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值