vant框架的select下拉框

Posted 2023-04-08

参考技术A vant似乎没有直接提供传统的select下拉框，我的意思是，单行单元格然后点击出现下拉框，样式和其他input统一。

今天做了一下，记录一下子，以免后面忘记

1.需求 input focus下出现下拉框，选中选项后 值绑定给field

2.html部分 圆圈处是控制底部抽屉是否显示

3.data和methods部分

web前端-vue的select下拉框宽度的设置

最近在使用SpringBoot框架做一些前后端分离的项目，但是我也写一部分简单的前端页面，目前使用Vue框架开发前端页面

下班使用vue-element-admin框架开发了一个简单的后台管理系统，在学习开发的过程之中遇到了一个功能

在form表单里面
这个默认的select下拉框宽度的宽度比较淡，看上去不是很好看
这里需要调整成为input输入框一样的长度

需要在select下拉框宽度加上如下属性：

style="width:100%"
或者
style="width:200px"

代码如下：

    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">

        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入昵称" />
        </el-form-item>

        <el-form-item label="角色" prop="roleId">
             <el-select v-model="form.roleId" clearable                 
               style="width:200px" placeholder="请选择">
                 <el-option
                     v-for="item in roleList"
                     :key="item.roleId"
                     :label="item.roleName"
                     :value="item.roleId"
                     :disabled="item.status == 1"
                 ></el-option>
             </el-select>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>

    </el-dialog>

输入框可以全长，下拉选择框自己设置保持一致了