精华内容
下载资源
问答
  • Vue实现下拉框

    2020-08-14 11:17:45
    先看看效果图: 鼠标经过列表,字体颜色发生改变 来看看代码: <template> <div class="content"> <div class="selectBox" style="width: 400px;">...i v-on:click.stop="arrowD

    先看看效果图:
    在这里插入图片描述

    鼠标经过列表,字体颜色发生改变
    在这里插入图片描述

    来看看代码:

    <template>
      <div class="content">
        <div class="selectBox" style="width: 400px;">
          <div class="selectBox_show">
            <p>{{ unitName }}</p>
            <i v-on:click.stop="arrowDown"></i>
          </div>
          <div class="selectBox_list" v-show="!isShowSelect">
            <div
              class="selectBox_listLi"
              v-for="(item, index) in dataList"
              :key="item.key"
              @click="select(item, index)"
            >
              {{ item.value }}
            </div>
          </div>
        </div>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
    export default {
      data() {
        return {
          isShowSelect: false,
          dataList: [
            {key: 1, value: "广州市"},
            {key: 2, value: "天河区"},
            {key: 3, value: "海珠区"},
            {key: 4, value: "荔湾区"},
            {key: 5, value: "番禺区"},
            {key: 6, value: "白云区"},
            {key: 7, value: "黄浦区"},
            {key: 8, value: "增城区"},
            {key: 9, value: "从化区"}
          ],
          unitName:'广州市'
        }
      },
      methods: {
        arrowDown() {
          this.isShowSelect = !this.isShowSelect;
        },
        select(item, index) {
          this.isShowSelect = false;
          this.unitModel = index;
          this.unitName = item.value;
        },
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .content {
      background-color: #001b30;
      height: 100vh;
      .selectBox {
        margin: auto;
        .selectBox_show {
          position: relative;
          p {
            color: #fff;
            font-size: 14px;
            padding-top: 12px;
            padding-left: 10px;
          }
          i {
            position: absolute;
            top: 18px;
            left: 55px;
            width: 0;
            height: 0;
            border-width: 0 8px 8px;
            border-style: solid;
            border-color: transparent transparent #8fdcde;
          }
        }
      }
      .selectBox_list {
        height: 120px;
        width: 80px;
        color: #3c759b;
        background-color: #00355e;
        margin-bottom: 5px;
        text-align: center;
        overflow: auto;
        font-size: 13px;
        .selectBox_listLi {
          cursor: pointer;
        }
        .selectBox_listLi:hover {
          color: #fff;
        }
      }
    }
    /*修改滚动条样式*/
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
      background-color: #021348;
    }
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 3px rgba(0.4, 0, 0, 0.3);
      border-radius: 10px;
      background-color: #021348;
    }
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
      background-color: #20307f;
    }
    </style>
    
    展开全文
  • 实现效果如下: 具体代码入下: 1、其中:filterable :filter-method="dataFilter"为过滤的关键 <el-col :span="24" v-if="showTransact"> <el-form-item label="New Issue Owner:"> <el-select...

    实现效果如下:
    在这里插入图片描述
    在这里插入图片描述
    具体代码入下:
    1、其中:filterable :filter-method="dataFilter"为过滤的关键

     <el-col :span="24" v-if="showTransact">
                        <el-form-item label="New Issue Owner:">
                        <el-select v-model="form.turn_to_transact" :disabled='isEditResolution' placeholder="Please Choose Administrative Person" filterable :filter-method="dataFilter" clearable>
                                <el-option v-for="item in optionsCopy" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-option>
                        </el-select>
                        </el-form-item>
                    </el-col>
    

    2、dataFilter的方法
    首先要初始化一个approveUserOption,并且让optionsCopy = approveUserOption。如果为则给optionsCopy 复制approveUserOption。

        dataFilter(val) {
            if (val) { //val存在
            debugger;
               var str = ".*"+val.toLowerCase()+".*"
               let reg = new RegExp(str)
              this.optionsCopy = this.optionsCopy.filter((item) => {
                if(item.label){
                    return reg.test((item.label.toLowerCase()).replaceAll(" ",""))
                }else{
                    return false;
                }
              })
            }else{
                this.optionsCopy = this.approveUserOption;
            }
            if(this.optionsCopy.length == 0){
                this.optionsCopy = this.approveUserOption;
            }
          }
    
    展开全文
  • vxe-list vue 实现下拉框的虚拟列表

    千次阅读 2020-05-05 10:41:05
    vxe-table vxe-list vue 实现海量虚拟下拉框 虚拟列表的实现原理:只渲染可视区的 dom 节点,其余不可见的数据卷起来,只会渲染可视区域的 dom 节点,提高渲染性能及流畅性,优点是支持海量数据的渲染;当然也会有...

    vxe-table vxe-list vue 实现下拉框的虚拟列表
    虚拟列表的实现原理:只渲染可视区的 dom 节点,其余不可见的数据卷起来,只会渲染可视区域的 dom 节点,提高渲染性能及流畅性,优点是支持海量数据的渲染;当然也会有缺点:滚动效果相对略差(海量数据与滚动效果的取舍问题就看自己的需求喽);

    <div class="my-select">
       <input type="text" class="my-select-input" readonly>
        <vxe-list class="my-select-wrapper" :loading="loading" :data="list">
            <template v-slot="{ items }">
                <div class="my-select-option" v-for="item in items" :key="item.value">{{ item.label }}</div>
            </template>
        </vxe-list>
    </div>
    
    export default {
    	data () {
    		return {
    	      loading: false,
    	      list: []
    	    }
    	},
    	created () {
    	    this.loading = true
            setTimeout(() => {
                const startTime = Date.now()
                var list = []
                for(var i=0;i<100000;i++){
                    list.push({
                        label: '选项'+i,
                        value: i
                    })
                }
                this.list = list
                this.loading = false
                this.$nextTick(() => {
                    this.$XModal.message({ message: `渲染 ${list.length} 行,用时 ${Date.now() - startTime}毫秒`, status: 'info' })
                })
            }, 200)
    	}
    }
    
    .my-select {
        width: 200px;
        position: relative;
        background-color: #fff;
    }
    
    .my-select-input {
        width: 100%;
        height: 24px;
        border: 1px solid #dcdfe6;
    }
    
    .my-select-wrapper {
        position: absolute;
        left: 0;
        top: 26px;
        width: 100%;
        height: 200px;
        background-color: #fff;
        border: 1px solid #dcdfe6;
    }
    
    .my-select-option:hover {
        background-color: #f5f7fa;
        cursor: pointer;
    }
    

    在这里插入图片描述

    接下来测试一下:
    渲染 1w 条只需要 150 毫秒左右
    渲染 5w 条只需要 300 毫秒左右
    渲染 10w 条只需要 500 毫秒左右

    具体用法可以去看 官方文档在线运行 http://jsrun.net/CW2Kp/edit

    展开全文
  • vue实现下拉框可以输入又下拉菜单

    千次阅读 2019-10-24 18:21:13
    问题描述:把input定位到select框中,然后把option中的值传到input中,最后修改了select图标样式,添加了点击事件,切换图标。 解决方案: ...

    问题描述:把input定位到select框中,然后把option中的值传到input中,最后修改了select图标样式,添加了点击事件,切换图标。
    解决方案:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    参考文章链接

    展开全文
  • 代码实现: OrderList.Vue <a-col :xl="6" :lg="7" :md="8" :sm="24"> <a-form-item label="订单状态"> <a-select placeholder="请选择订单状态" v-model="queryParam.status" :options=...
  • data(){ return{ countryList:[],//所有国家 我的数据是后端返回的 countryOpt:[],//展示的国家 dataForm:{ country:'', }, } }, 实现模糊查询的方法 remoteMethod(query){ if(query != ''){ this.countryOpt =...
  • 主要介绍了vue 通过下拉框组件学习vue中的父子通讯的相关知识,文中涉及到了父组件,子组件的实现代码,需要的朋友可以参考下
  • 主要介绍了vue实现下拉框功能,涉及vue.js数据读取、遍历、事件响应等相关操作技巧,需要的朋友可以参考下
  • vue select下拉框添加复选框

    千次阅读 2020-07-24 14:35:07
    vue select下拉框添加复选框 实现效果 直接改变选中样式: <el-select v-model="alarmStatu" size="small" multiple collapse-tags clearable :loading="loading" width="220px" @change="s
  • 本文实例为大家分享了vuejs实现下拉框菜单选择的具体代码,供大家参考,具体内容如下方法一:export default {data() {return {isShowSelect: false,dataList: [{key: -1, value: "请选择"},{key: 0, value: "苹果"}...
  • vue 设置下拉框三级联动

    千次阅读 2018-10-19 16:16:54
    如图中,用vue实现三个选择框是联动关系,首先选择厂商,然后品牌下拉框中出现的品牌是所选厂商包含的品牌,同理,选择完品牌后,车型也是所选品牌中包含的车型。 例如有这样的对应关系: 厂商 品牌 车型 ...
  • vue实现百度下拉框

    2018-08-14 15:18:00
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...百度下拉框</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, ...
  • 效果展示image.png下拉组件∨//下拉列表{{item.Name}}data() {return {checkedData: [], //选中的数据isShow: false, //下拉列表是否显示selectCon: "", //选中的内容};},props: ["liData"],点击空白处隐藏下拉列表...
  • vue移动端下拉框插件的使用教程

    千次阅读 2019-06-28 09:41:43
    功能实现: 第一步:将外部js和css文件放在项目文件夹中 文件下载地址:https://download.csdn.net/download/liangmengbk/11262453 第二步:在route文件夹中的index.js中引用文件: import picker from "../../st....
  • Vue+axios实现下拉框联动刷新 用v-model绑定、获取下拉框选中value 通过v-for,遍历部门列表/角色列表,动态展现option里的数据 通过’v-on’设置option的value 通过{{message}}设置option的text 即将迭代出的item中...
  • Vue实现电商网站项目vue+vue-router+vuex实现电商网站效果展示install下载代码:git clone https://github.com/chenchangyuan/shopping.git安装依赖:npm install启动项目:npm run dev运行环境:node v9.11.1npm 5.6.0...
  • 主要介绍了vue 不使用select实现下拉框功能,在文章给大家提到了vue select 组件的使用与禁用,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 430
精华内容 172
关键字:

vue实现下拉框

vue 订阅