标签分类 技术文章:
当前位置:首页 > vue.js技术文章 > element-ui中的select下拉列表设置默认值方法

element-ui中的select下拉列设置的实例代码

  • 发布时间:
  • 作者:码农之家原创
  • 点击:209

这篇文章主要知识点是关于element-ui、select、下拉列表、默认值、在element-ui的select下拉框加上滚动加载 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js前端开发:快速入门与专业应用
  • 类型:前端开发大小:3.6KB MB格式:PDF出版:人民邮电出版社作者:陈陆扬
立即下载

更多Vue相关的学习资源可以参阅 Vue电子书程序设计电子书 等栏目。

element-ui中的select下拉列表设置默认值方法

element-ui中的select下拉列表如何设置默认值?

在element-ui的运用中,涉及到了select下拉列表。项目中需要将select的默认值给展示出来

那如何修改呢?

上element-ui中的代码片段

<template>
 <el-select v-model="value" placeholder="请选择">
 <el-option
  v-for="item in options"
  :key="item.value"
  :label="item.label"
  :value="item.value">
 </el-option>
 </el-select>
</template>

<script>
 export default {
 data() {
  return {
  options: [{
   value: '选项1',
   label: '黄金糕'
  }, {
   value: '选项2',
   label: '双皮奶'
  }, {
   value: '选项3',
   label: '蚵仔煎'
  }, {
   value: '选项4',
   label: '龙须面'
  }, {
   value: '选项5',
   label: '北京烤鸭'
  }],
  value: ''
  }
 }
 }
</script>

修改如下

<template>
 <el-select v-model="value" placeholder="请选择">
 <el-option
  v-for="item in options"
  :key="item.value"
  :label="item.label"
  :value="item.value">
 </el-option>
 </el-select>
</template>

<script>
 export default {
 data() {
  return {
  options: [{
   value: '0',
   label: '全部'
  }, {
   value: '1',
   label: '待收款'
  }, {
   value: '2',
   label: '已收款'
  }, {
   value: '3',
   label: '已发货'
  },
  value: '全部'
  }
 }
 }
</script>

接下来。我们在点击查询的方法里打印一下value的值

onSearch () {
 // console.log('value是' + this.value)
 if (this.value === '全部') {
  this.value = '0'
 }
}

这样就保证了this.value打印出来的为0,1,2,3。拿到这些值后,就可以传给后端,请求数据了!

拓展知识:基于VUE中的el-select 初始值设置问题介绍

如下所示:

<el-select v-model="form.admin_type" placeholder="所在分组" ><el-option v-for="item in selectItem" :label="item.dict_desc" :value="item.dict_id" :key="item.dict_id"></el-option></el-select>

本人用的是vue下ELement,上面事例里面的v-model里面是admin_type是后台读取的一个类型值,

当这个admin_type和dict_id相等的时候,option就相当于设置了selected。

然后我每次后台读取的数据都没法显示真正的text(即上面option中label)的值,只是显示了dict_id的真实值。各种尝试后发现和我之前的一篇博客所说的问题一样。

因为后台读取到的dictId是字符串比如:“1”,而option根据value查找对比的是数字int:1,所以每次后台读取的数据必须在paraeInt,才可以正确显示。

以上这篇element-ui中的select下拉列表设置默认值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。

在element-ui的select下拉框加上滚动加载

 在项目中,我们需要运用到很多来自后端返回的数据。有时是上百条,有时甚至上千条。如果加上后端的多表查询或者数据量过大,这就导致在前端的显示就会及其慢,特别是在网络不好的时候更是如此。

自然,后端就做了一项非常“漂亮”的交互体验数据——分页

这不分页还好,一分页对超过10条数据之后的本来也不多,就20条,偏偏还得做个分页器。(假设为10条)

此时,如果能够像购物商城那样拖拽到底部自动加载新数据就好了。

于是《在element-ui的select下拉框加上滚动加载》诞生了。

这里通过自定义封装vue指令进行封装。(什么是指令:官方指令叫v-on,v-model)

以下以element-ui中的select为例:

 在main.js同级别文件中添加directives.js:

// directives.js

import Vue from 'vue'
Vue.directive('loadmore', {
 bind (el, binding) {
  // 获取element-ui定义好的scroll盒子
  const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
  SELECTWRAP_DOM.addEventListener('scroll', function () {
   
   const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
   if (CONDITION) {
    binding.value()
   }
  })
 }
})
  • v-loadmore: 用于在element-ui的select下拉框加上滚动到底事件监听
  • scrollHeight 获取元素内容高度(只读)
  • scrollTop 获取或者设置元素的偏移值,常用于, 计算滚动条的位置, 当一个元素的容器没有产生垂直方向的滚动条, 那它的scrollTop的值默认为0.
  • clientHeight 读取元素的可见高度(只读)

如果元素滚动到底, 下面等式返回true, 没有则返回false

scrollHeight - scrollTop === clientHeight

这里运用到了滚动偏移来做监听来处理,这与聊天对话框中默认下拉到底部的原理是大同小异的,后续我会有专门的文章进行讲解。

// main.js
// 注册滚动条加载触发事件v-loadmore绑定
import directives from './directives'
Vue.use(directives)

然后在组件中使用

<!-- vue -->
<el-select
 v-model="chatmode"
 placeholder="聊天模式"
 size="mini"
 v-loadmore="loadMore">
 <el-option
  v-for="item in chatmodes"
  :key="item.value"
  :label="item.qa_name"
  :value="item.qa_code"
  :disabled="item.disabled">
 </el-option>
</el-select>
<script>
export default {
 methods: {
  loadMore () {
   // 这里写入要触发的方法
  }
 }
}
</script>

总结

以上所述是小编给大家介绍的在element-ui的select下拉框加上滚动加载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

以上就是本次给大家分享的关于Vue的全部知识点内容总结,大家还可以在下方相关文章里找到vue状态管理模式vuex知识点、 vue:src文件路径错误问题及、 Vue.js修饰符知识点详解、 等vue.js文章进一步学习,感谢大家的阅读和支持。

上一篇:vue-cli项目中缩短首屏加载时间实例

下一篇:vue纯js监听滚动条到底部的知识点实例

展开 +

收起 -

学习笔记
网友NO.384848

Element-ui之ElScrollBar组件滚动条的使用方法

在使用 vue + element-ui 搭建后台管理页面的时候,做了一个头部、侧栏、面包屑固定的布局,导航栏和主要内容区域当内容超出时自动滚动。 使用的原因: 原来是采用优化浏览器样式的方式,对滚动条进行样式调整。但这个方法并不兼容火狐浏览器,在火狐访问时依然是浏览器默认的滚动条样式。 .sidebar { position: fixed; border-right: 1px solid rgba(0,0,0,.07); overflow-y: auto; position: absolute; top: 0; bottom: 0; left: 0; transition: transform .25s ease-out; width: 300px; z-index: 3;}.sidebar::-webkit-scrollbar { width: 4px}.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px}.sidebar:hover::-webkit-scrollbar-thumb { background: hsla(0,0%,53%,.4)}.sidebar:hover::-webkit-scrollbar-track { background: hsla(0,0%,53%,.1)} 灵感来源 在翻看 element-ui 官网的文档时,发现其左侧导航和右边的内容超出屏幕时,滚动条的样式比较小巧,通过浏览器审查工具查看,发现它是使用了el-scrollbar的样式,跟element-ui的组件样式命名一致。但文档中并没有关于这个 scrollbar组件的使用文档,搜索一番得知这是一个隐藏组件,官方在 github 的 issues 中表示不会写在文档中,需要用的自己看源码进行调用。 最终实现效果 实现步骤 一、阅读源码 通过阅读源码, scrollbar 组件暴露了 native , wrapStyle , wrapClass , viewClass , viewStyle , no……

网友NO.936773

element-ui循环显示radio控件信息的方法

如下所示: el-form-item label="线路类型:" prop="isGive" el-radio-group v-model="currentLine.isGive" el-radio :label="item.id" :key="item.id" v-for="item in isGive" {{item.name}}/el-radio /el-radio-group /el-form-item data () { return { merchantId: 0, centerDialogVisible: false, lineList: [], portOptions: [], isGive:[ { id : "n", name : "购买" }, { id : "y", name : "赠送" } ], 根据接收到的数据 currentLine.isGive 来决定显示购买和赠送,如果不写{{item.name}}那么默认显示的是radio所绑定的:lable的值,如果想要使不同的选项显示,要在data中建一个json数据,结构代码中插入{{item.name}}来取代默认的显示值。 以上这篇element-ui循环显示radio控件信息的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.446755

详解vue-cli+element-ui树形表格(多级表格折腾小计)

前沿 最近在项目开发中需要做一个多级表格,树形表格的功能,看看element-ui上没有,自己开是折腾,话不多说,上思路和代码。 效果图: 可点击收缩,展开。 一,首先创建一个公共的文件夹treeTable,里边放一个index.vue和eval.js 先看看index.vue,原理就是在element-ui的基础上做了进一步改造。 //利用element-ui的 template slot-scope="scope"属性,在插入多级表格template el-table :data="formatData" :row- v-bind="$attrs" el-table-column v-if="columns.length===0" width="150" template slot-scope="scope" span v-for="space in scope.row._level" class="ms-tree-space" :key="space"/span span class="tree-ctrl" v-if="iconShow(0,scope.row)" @click="toggleExpanded(scope.$index)" i v-if="!scope.row._expanded" class="el-icon-plus"/i i v-else class="el-icon-minus"/i /span {{scope.$index}} /template /el-table-column el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width" template slot-scope="scope" span v-if="index === 0" v-for="space in scope.row._level" class="ms-tree-space" :key="space"/span span class="tree-ctrl" v-if="iconShow(index,scope.row)" @click="toggleExpanded(scope.$index)" i v-if="!scope.row._expanded" class="el-icon-plus"/i i v-else class="el-icon-minus"/i /span {{scope.row[column.value]}} /template /el-table-column slot/slot /el-table/templatescriptimport treeToArray from './eval'export default { name: 'treeTable', pro……

网友NO.334201

element-ui 限制日期选择的方法(datepicker)

Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint UI 。 需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDate 即可。 查看Demo Template script src="//unpkg.com/vue/dist/vue.js"/scriptscript src="//unpkg.com/element-ui@2.3.8/lib/index.js"/scriptdiv id="app"template div class="block" span class="demonstration"起始日期/span el-date-picker v-model="startDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsStart" @change="changeEnd" /el-date-picker /div div class="block" span class="demonstration"截止日期/span el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptionsEnd" @change="changeStart" /el-date-picker /div/template/div Script var Main = { data() { return { pickerOptionsStart: {}, pickerOptionsEnd:{}, startDate: '', endDate: '', }; }, methods:{ changeStart (){ this.pickerOptionsStart = Object.assign({},this.pickerOptionsStart,{ disabledDate: (time) = { return time.getTime() this.endDate } }) }, changeEnd (){ this.pickerOptionsEnd = Object.assign({},this.pickerOptionsEnd,{ disabledDate: (time) = { return time.getTime() this.startDate } }) } } };var Ctor = Vue.extend(Main)new Ctor().$mount('#app') Style @import url("//unpkg.com/element-ui@2.3.8/lib/theme-c……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明