下拉选择框

Posted 2022-03-26 算法与编程之美

1.问题描述

当我们在填一些问卷的时候，问卷的设计基本都是通过输入框实现的，普通的输入框就是一个问题后面会出现一个填写内容的框架，有时还会出现下拉选择框，下拉选择框的实现是与普通输入框不一样的，下面将介绍下拉选择框的算法。

2.算法描述

首先，会用到el-select组件，v-model和value是绑定值，类型为string/number；placeholder是输入框占位文本意思、类型为string，placeholder里面写的文字会直接显示在文本框里面；lablel的意思是输入框关联的label文字，若不设置lablel则默认与value相同。在使用el-select中，新增一条option，如果value对应的值是string则不会影响前端的显示。

3. 实验讨论与结果

下拉选择框的代码如下：

<el-option </el-optionlabel="下拉框1" value="1">       <el-option </el-optionlabel="下拉框2" value="2">       <el-option </el-optionlabel="下拉框3" value="3">       <el-option </el-optionlabel="下拉框4" value="4">       <el-option </el-optionlabel="下拉框5" value="5">

该部分代码仅仅是下拉选择框的代码，如果要与其他的内容一起展示时，最好用一个盒子div装在一起，便于后面样式设置，以防代码混乱不方便自己查找。

最后呈现效果如下：

四.结语

下拉选择框需要注意是下拉框的内容能否正确显示出来，以及样式的设置。

稿件来源：深度学习与文旅应用实验室（DLETA） 

---

作者：赵玉琴

主编：欧洋