发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

Vue中select下拉框的默认选中项的三种情况解读

用户创富者

3

主题

3

帖子

9

积分

新手上路

Rank: 1

积分
9
显示全部楼层
vue select下拉框的默认选中项的三种情况

在Vue中 使用select下拉框 主要靠的是 v-model 来绑定选项 option 的 value 值。
select下拉框在界面的展示，我们都希望看到框中有一个值 而不是空白，比如显示 “请选择” 或者 “全部” 的默认值。
先来看效果图

关于select选项的写法 有三种情况

  • ①.写在HTML中
  • ②.写在JS一个数组中
  • ③.通过接口去获取得到
我们直接上代码：

第一种是option的值写在HTML中
  1.   <div id="app">
  2.      <select name="status" id="status" v-model="selected">
  3.          <option value="">请选择</option>
  4.          <option value="1">未处理</option>
  5.          <option value="2">处理中</option>
  6.           <option value="3">处理完成</option>
  7.      </select>
  8.    </div>
  9. <script>
  10.    new Vue({
  11.        el:'#app',
  12.        data:{
  13.               selected:''  
  14.               //默认选中项的value值是什么  就给绑定的属性什么值  这里默认选中项请选择的value值是空  我们就给绑定的属性 select 一个空值
  15.        },
  16.    })
  17.     </script>
复制代码
第二种是option 选项内容写在JS中的

通过v-for来遍历的：
  1. <body>
  2.     <div id="app">
  3.      <select name="status" id="status" v-model="selected">
  4.             <option :value="item.statusId" v-for="(item,index) in statusArr">{{item.statusVal}}</option>
  5.      </select>
  6.    </div>
  7. </body>
  8. <script>
  9.    new Vue({
  10.        el:'#app',
  11.        data:{
  12.               statusArr:[
  13.                   {
  14.                       statusId:'0',
  15.                       statusVal:'请选择'
  16.                   },
  17.                   {
  18.                       statusId:'1',
  19.                       statusVal:'未处理'
  20.                   },
  21.                   {
  22.                       statusId:'2',
  23.                       statusVal:'处理中'
  24.                   },
  25.                   {
  26.                       statusId:'3',
  27.                       statusVal:'处理完成'
  28.                   },
  29.               ],
  30.               selected:''
  31.        },
  32.        created(){
  33.            // 在组件创建之后，把默认选中项的value值赋给绑定的属性
  34.            //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
  35.          this.selected = this.statusArr[0].statusId;
  36.        }
  37.    })
  38.     </script>
复制代码
第三种是option 选项内容

通过接口去获取 但是接口里没有默认选中项怎么办呢？看代码
  1. <body>
  2.     <div id="app">
  3.      <select name="status" id="status" v-model="selected">
  4.          <!-- 由于从接口获取的select的下拉值没有‘请选择'，所以我们要自己写一个 -->
  5.         <option value="">请选择</option>
  6.         <option :value="item.statusId" v-for="(item,index) in statusArr">{{item.statusVal}}</option>
  7.      </select>
  8.    </div>
  9. </body>
  10. <script>
  11.    new Vue({
  12.        el:'#app',
  13.        data:{
  14.               statusArr:[], //用来接收从接口里获取出来的select下拉框里的值
  15.               selected:''
  16.        },
  17.        getSelectInfo(){
  18.            var url = "../monitor_admin_front/device/status"; //接口地址
  19.            axios.get(url)
  20.            .then(response => {
  21.               if(response.data.retCode == 0){
  22.                  this.statusArr = response.data.data; //将获取出来的数据赋给定义的数组 以便于去循环遍历
  23.               }
  24.            })
  25.        },
  26.        created(){
  27.          this.getSelectInfo();
  28.        }
  29.    })
  30.     </script>
复制代码
vue中select默认选中下拉选项第一条（举例iview AutoComplete组件）


html中


  • 静态
给对应option元素直接添加selected属性
  1. <select>
  2.         <option value="0">one</option>
  3.         <option value="1">two</option>
  4.         <option value="2" selected>three</option>
  5. </select>
复制代码

  • 动态
option加载完成后给对应元素添加selected属性
  1. $("option")[2].prop("selected","selected");
复制代码
vue中

选中第一项同时并改变select绑定的value（正常业务）
  1. <template>
  2.         <select v-model="value">
  3.                 <option value="0">New York</option>
  4.                 <option value="1">London</option>
  5.                 <option value="2">Sydney</option>
  6.                 <option value="3">Ottawa</option>
  7.         </select>
  8. </template>
  9. export default {
  10.         data () {
  11.             return {
  12.                     value: '0'       
  13.             }
  14.     }
  15. }
复制代码
可模糊匹配，select输入模糊匹配，默认选中下拉选项中第一项，但select绑定的value不变，即下图所示：

我的做法是
1.输入值改变时，监听change事件引起下拉选项的发生改变


2.判断筛选后的下拉选项Dom元素中没有选中项，为第一项New York添加选中样式；若有选中项则不操作


3.监听回车事件，如此时有回车事件，判断下拉选项Dom中第一项有选中样式则将value的值变更为选项中第一项的值，即this.value = ‘New York’，并将下拉选项框隐藏

4.我的实际列子是使用iviewUI中的AutoComplete组件做的（简单举个例子，只提供参考）
  1. <template>
  2.   <div id="search-input-component">
  3.     <AutoComplete
  4.       v-model="value"
  5.       type="text"
  6.       @keydown.enter.native.prevent="enterEvent"
  7.       @on-change="change"
  8.     >
  9.       <Option
  10.         v-for="item in changeList"
  11.         :value="item.value"
  12.         :key="item.value"
  13.       >
  14.         {{item.name}}
  15.       </Option>
  16.     </AutoComplete>
  17.   </div>
  18. </template>
  19. <script>
  20. export default {
  21.   data () {
  22.     return {
  23.       value: '', // AutoComplete绑定的值
  24.       valueLists: [
  25.         // { value: '选项值', name: '选项名' }
  26.       ], // 全部拉选项列表
  27.       changeList: [] // 实时模糊匹配的下拉选项列表
  28.     }
  29.   },
  30.   created () {
  31.     this.getAllList()
  32.   },
  33.   methods: {
  34.     // 获取所有下拉选项
  35.     getAllList () {
  36.       // ...Data
  37.       this.valueLists = Data
  38.       this.changeList = Data
  39.     },
  40.     // 输入change事件
  41.     change (val) {
  42.       // 模糊匹配逻辑,重新生成下拉选项列表
  43.       this.changeList = []
  44.       this.valueLists.map(item => {
  45.         if (item.toUpperCase().indexOf(val.toUpperCase()) !== -1) {
  46.           this.changeList.push(item)
  47.         }
  48.       })
  49.       this.$nextTick(() => {
  50.         // 下拉框中所有选项的Dom
  51.         const ele = document.querySelectorAll('#search-input-component .ivu-select-dropdown.ivu-auto-complete .ivu-select-dropdown-list .ivu-select-item')
  52.         let hasFocus = false // 初始赋值没有选中项
  53.         for(let i=0; i < ele.length; i++) {
  54.           // 判断有选中项
  55.           if (ele[i].className.indexOf('ivu-select-item-focus') > -1) {
  56.             hasFocus = true
  57.             break
  58.           }
  59.         }
  60.         // 判断没有选中项，则选中第一项（添加选中样式）
  61.         if (!hasFocus && (ele[0].className.indexOf('ivu-select-item-focus') === -1)) {
  62.           ele[0].classList += ' ivu-select-item-focus'
  63.         }
  64.       })
  65.     },
  66.     // 回车事件
  67.     enterEvent (card, isUpdate) {
  68.       const selectDom = document.querySelector('#search-input-component .ivu-select-dropdown.ivu-auto-complete')
  69.       // 下拉选项有匹配到数据 并且 下拉选项没有隐藏
  70.       if (this.changeList.length && !selectDom.style.display) {
  71.         // 下拉框中所有选项的Dom
  72.         const items = document.querySelectorAll('#search-input-component .ivu-select-dropdown.ivu-auto-complete .ivu-select-dropdown-list .ivu-select-item')
  73.         let hasFocus = false // 初始赋值没有选中项
  74.         for(let i=0; i < items.length; i++) {
  75.           // 判断有选中项
  76.           if (items[i].className.indexOf('ivu-select-item-focus') > -1) {
  77.             hasFocus = true
  78.             break
  79.           }
  80.         }
  81.         // 判断没有选中项，则选中第一项
  82.         if (!hasFocus) {
  83.           this.value = this.changeList[0].cardId
  84.         }
  85.         selectDom.style.display = 'none' // 隐藏下拉框
  86.       }
  87.     }
  88.   }
  89. }
  90. </script>
复制代码
总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/article/284078.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: vue中radio单选框如何实现取消选中状态问题

下一篇: 每天学习一个hooks useMount

发表于 2023-5-12 17:05:24

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4