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 ...
随机推荐
- IDEA常见问题
IDEA常见问提解决 一:拉取git代码认证失败(无法重新输入账户和密码) git config --system --unset credential.helper 二:取消新建文件自动添加到S ...
- vue中的main.js打开直接报错问题解决
安装好后也是报这样的错,是因为WebStorm默认使用的是ES5的语法,改成ES6就可以了. 解决方案:
- Android全局异常捕获
PS:本文摘抄自<Android高级进阶>,仅供学习使用 Java API提供了一个全局异常捕获处理器,Android引用在Java层捕获Crash依赖的就是Thread.Uncaught ...
- Android 控件布局常用的属性
<!--单个控件经常用到android:id —— 为控件指定相应的IDandroid:text —— 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串a ...
- Vue-cli 3.0自定义脚手架
一.进入项目地址 https://github.com/vuejs/vue-cli ,选择 docs目录查看具体安装流程. 中文文档:https://cli.vuejs.org/zh 可以看到我电脑上 ...
- 51nod 1551 集合交易 最大权闭合子图
题意: 市场中有n个集合在卖.我们想买到满足以下要求的一些集合,所买到集合的个数要等于所有买到的集合合并后的元素的个数. 每个集合有相应的价格,要使买到的集合花费最小. 这里我们的集合有一个特点:对于 ...
- 关于C/C++的一些思考(1)
C++的前世今生: C的结构化思想: Ada的模版思想: Fortran的运算符重载思想: Simula的OO思想:封装,继承,多态: C++类型描述了变量的三个特征: 该类型在内存中占用物理空间的大 ...
- Python之trutle库-五角星
Python之trutle库-五角星 #!/usr/bin/env python # coding: utf-8 # Python turtle库官方文档:https://docs.python.or ...
- Ubuntu中Python3虚拟环境的搭建
1.环境准备 首先请自行安装好Python3和pip3(一般Ubuntu是自带Python3的,可以通过sudo apt-get install python3-pip命令来安装pip3) 安装完成后 ...
- python 调用 C 动态库
首先是 C 的头文件和源文件, #ifndef POINT_H #define POINT_H struct point { int x; int y; }; void point_print(str ...