Vue中-下拉框可以选择可以填写
<el-form-item label="方法名称">
<el-autocomplete popper-class="my-autocomplete"
v-model="customForm.MethodName"
:fetch-suggestions="querySearchMethod"
placeholder="请输入方法名称"
:disabled="IsDisabled"
@select="((item)=>selectMethodChange(item))">
<template slot-scope="{ item }">
<div class="name">{{ item.value }}</div>
</template>
</el-autocomplete>
</el-form-item> // 方法
querySearchMethod(queryString, cb) {
let that = this;
var solList = []
that.MethodOptionItems.forEach(item => {
solList.push({ 'label': item.value, 'value': item.label })
}) var results = queryString
? solList.filter(this.createFilterMethod(queryString))
: solList;
// 调用 callback 返回建议列表的数据
cb(results);
},
createFilterMethod(queryString) {
let that = this;
var solList = that.MethodOptionItems;
return solList => {
return (
//solList.label.toLowerCase().indexOf(queryString.toLowerCase()) === 0
solList.label
);
};
},
handleSelectMethod(item) {
console.log(item);
},
Vue中-下拉框可以选择可以填写的更多相关文章
- VUE 单选下拉框Select中动态加载 默认选中第一个
<lable>分类情况</lable> <select v-model="content.tid"> <option v-for=&quo ...
- vue获取下拉框值
vue获取下拉框的值,用vue-modle,只有点击下拉框的值才会赋值到下拉框中,初始时下拉框没有数据,而改用$event就不会出现这样的问题,下面看代码以及图解: v-model解决方式: < ...
- vue select下拉框绑定默认值
vue select下拉框绑定默认值: 首先option要加value值,以便v-model可以获取到对应选择的值 一.当没有绑定v-model,直接给对应的option加selected属性 二.当 ...
- vue实现下拉框全选和输入匹配
实际项目中的一个需求: 点击文本框,弹出带有复选框的选项,然后获取选中项的数据,传给后面的一个功能.在文本框输入内容,也会动态的匹配下拉列表,并且列表带有全选功能. 朴素的效果图: 我选择了用vue实 ...
- vue自定义下拉框组件
创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...
- vue+element下拉框样式的点击按钮
项目中点击按钮实在太多了,怎么办呢?我们就可以将它们制作成像下拉框那样的类似操作 1.HTML样式部分:关键点在于command 方法和属性 1 <el-dropdown 2 size=&quo ...
- vue 根据下拉框动态切换form的rule
taskCategorySelect (val) { // 任务类别下拉选择 if ( val == 5 ) { this.cameraORgateway = false; // true不可以使用 ...
- vue 树形下拉框 亲测 好用
https://vue-treeselect.js.org/ 顺带说一个开发中使用这个组件遇到的问题,关于回显之后无法修改的问题 找了很长时间 原因是数据类型导致的问题,数组里面应该是数字类型,直接 ...
- Vue 日期下拉框
<!-- html --> <template> <!-- 控件样式 --> <div class="select"> <di ...
随机推荐
- 【计算机网络】2.2 Web和HTTP
第二章第二节 Web和HTTP 这一章中,我们需要讨论5种重要的应用:Web.文件传输.电子邮件.目录服务.P2P:这一节中,我们将讨论Web和它的应用层协议HTTP. Outline Web简介 H ...
- zabbix4.2学习笔记--新建用户组和用户
新建用户组 zabbix中管理机器是以用户组划分,这里新建一个只读用户群组和只读用户 新建用户组 点击 管理-用户组-创建用户群组,如下图 点击创建之后,有三列设置,分别是用户群组.权限和标签过滤器, ...
- rsync_ssh
rsync -av -e "ssh" /data/wwwroot/a1 node2:/data/wwwroot/
- adb 设备命令
一.adb 设备命令1.查看机型时,可以使用以下命令$ adb shell getprop ro.product.model 2.如果我们忘记具体系统属性的名字$ adb shell getprop ...
- JavaScript中的跨域问题
跨域问题其实很普遍的存在的,如何解决跨域问题呢,跨域问题到底是怎么产生的,解决方法的由来又是什么?我觉得看了视频讲解,值得写下来,记录下来. 一.跨域问题是怎么产生? 概念:只要协议.域名.端口有任何 ...
- uglifyjs压缩批处理,.bat文件启动
我们不可能每次都打开cmd去键入压缩执行代码,容易写错不说(如上面那个结果图),还耗时,想想都会让人疯掉. 懒人有懒法,花了点功夫,折腾了一个批处理文件,以后,想要压缩JS,只要双击运行这个.bat文 ...
- for in,Object.keys()与for of的用法与区别
Array.prototype.sayLength=function(){ console.log(this.length); } let arr = ['a','b','c','d']; arr.n ...
- 关于动态添加的html元素绑定的事件不生效的解决办法
1.可以通过行内添加事件的方法,比如onclick="fn()"; 在js中写好方法名对应的方法就可以了,如果绑定方法的元素太多 2.jquery的on事件绑定 //on事件可以给 ...
- BZOJ 3876 支线剧情 有源汇有上下界最小费用可行流
题意: 给定一张拓扑图,每条边有边权,每次只能从第一个点出发沿着拓扑图走一条路径,求遍历所有边所需要的最小边权和 分析: 这道题乍一看,可能会想到什么最小链覆盖之类的,但是仔细一想,会发现不行,一是因 ...
- [Python3网络爬虫开发实战] 1.6.1-Flask的安装
Flask是一个轻量级的Web服务程序,它简单.易用.灵活,这里主要用来做一些API服务. 1. 相关链接 GitHub:https://github.com/pallets/flask 官方文档:h ...