vue的el-select标签全选以及出现需要有禁用选项
首先说一下遇到这种问题的解决思路吧,很简单先去https://element.eleme.cn/#/zh-CN 这个官网上找到对应的需求,然后就是拼接数据的问题。
以下是全选的例子:
<el-select class="fr" v-model="searchJobType" style="width: 185px; margin-right:8px;" size="mini" type="text" multiple collapse-tags @change="changeSelect" placeholder="请选择类型查询">
<el-option v-for="(type,ind) in typeList" :key=ind :label="type.label" :value="type.value"></el-option>
</el-select> var Main = {
data() {
return {
searchJobType: ['ALL_SELECT','TSINPUT', '01', '02', '03', '04', '05', '07', '08', '09', '11', '12'],
oldSearchJobType: [],
typeList: [
{value: 'ALL_SELECT', label: '全部'},
{value: 'TSINPUT', label: '时序数据采集任务'},
{value: '01', label: 'RDBMS → HIVE全量'},
{value: '02', label: 'RDBMS → HDFS全量'},
{value: '03', label: 'RDBMS → HBASE全量'},
{value: '04', label: 'HDFS → RDBMS'},
{value: '05', label: 'HIVE → RDBMS'},
{value: '07', label: 'RDBMS → HIVE增量'},
{value: '08', label: 'RDBMS → HBASE增量'},
{value: '09', label: '文件 → RDBMS'},
{value: '11', label: '数据对象 → 数据对象'},
{value: '12', label: 'FTP服务器 → 文件系统'},
]
}
},
methods:{
changeSelect(val) {
const allValues = [];
// 保留所有值
for (const item of this.typeList) {
allValues.push(item.value)
}
// 用来储存上一次的值,可以进行对比
const oldVal = this.oldSearchJobType.length === 1 ? this.oldSearchJobType[0] : [];
// 若是全部选择
if (val.includes('ALL_SELECT')) this.searchJobType = allValues;
// 取消全部选中 上次有 当前没有 表示取消全选
if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) this.searchJobType = [];
// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
// 新老数据都有全部选中
if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
const index = val.indexOf('ALL_SELECT');
val.splice(index, 1); // 排除全选选项
this.searchJobType = val
}
// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
if (val.length === allValues.length - 1) this.searchJobType = ['ALL_SELECT'].concat(val)
}
// 储存当前最后的结果 作为下次的老数据
this.oldSearchJobType[0] = this.searchJobType;
},
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
原文链接:https://www.cnblogs.com/zhenggaowei/p/9828364.html
有时候还会遇到一种情况,有时候可能会根据某种条件导致不能选择某一个选项,就需要有禁用项。以下网站可参考的代码。
在el-option中,设定disabled值为 true,即可禁用该选项 <template>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
:disabled="item.disabled">
</el-option>
</el-select>
</template> <script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶',
disabled: true
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
个人代码列子,我的工作需求是这样的。首先要选择分行进行工单推送,因为分行较多,所以很有可能这次推送了,下次再进行推送的又选中该分行了,这样就会造成该分行数据错乱问题,所以就需要有一个判断,已经推送的就显示为禁用项。
前台代码:
<el-select @change="changeBank()" v-model="bankIdList" multiple size="small" collapse-tags style="margin-left: 20px;"
placeholder="请选择分行(可多选)">
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
:disabled="item.disabled">
</el-option>
</el-select>
// 加载所有分行
loadAllBranch() {
console.log(1);
this.utils.post(this,'allBranchForVue.do',{orderId:this.wo_id},d=>{
console.log(d);
this.options = d;
});
},
后台代码:
String orderId = request.getParameter("orderId");
List<WorkOrder> wList = null;
if(StringUtils.isNoneBlank(orderId)){
wList = workOrderService.getnameSXBybossID(orderId); //获取已经推送的分行信息
}
UserModel u = AuthUtil.getLoginUser(request);
//List<OrgModel> list = orgService.getAllBranch(u.getId());
List<OrgModel> list = orgService.getAllBranchForVue(); //获取所有分行
JSONArray json = new JSONArray();
for (OrgModel om: list) {
JSONObject jsonObject=new JSONObject();
jsonObject.put("id",om.getId());
jsonObject.put("name",om.getName());
jsonObject.put("nameSX",om.getNameSX());
jsonObject.put("parent",om.getParent());
//QCQ20190712 判断是否已推送 已推送变灰色不可选 此功能暂时屏蔽
/*if(!wList.isEmpty() && StringUtils.isNoneBlank(om.getNameSX())){
for (WorkOrder wo: wList) {
if(wo.getWorkOrderId().contains(om.getNameSX())){
jsonObject.put("name",om.getName() + " (已推送)");
jsonObject.put("disabled",true);
}
}
}*/
json.add(jsonObject);
}
try {
response.getWriter().write(json.toString()); // 将JSON数据返回页面
} catch (Exception e) {
e.printStackTrace();
}
vue的el-select标签全选以及出现需要有禁用选项的更多相关文章
- jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上
这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...
- vue实现下拉框全选和输入匹配
实际项目中的一个需求: 点击文本框,弹出带有复选框的选项,然后获取选中项的数据,传给后面的一个功能.在文本框输入内容,也会动态的匹配下拉列表,并且列表带有全选功能. 朴素的效果图: 我选择了用vue实 ...
- vue.js 批量删除跟全选,反选效果
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- Vue.js实现checkbox的全选和反选
小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...
- vue开发购物车,解决全选单选问题
实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...
- Jquery 遍历 Table;遍历CheckBox ;遍历Select;全选/全不选
关于Jquery:相信大家已经很熟悉了,我最近的项目运用到关于Jquery的遍历事件:权当总结下: 遍历Table <table id="thistab"> < ...
- vue+vant实现购物车的全选和反选业务,带你研究购物车的那些细节!
前言 喜欢购物的小伙伴看过来,你们期待已久的购物车来啦!相信小伙伴逛淘宝时最擅长的就是加入购物车了,那购物车是如何实现商品全选反选的呢?今天就带你们研究购物车的源码,以vue+vant为例. 正文 首 ...
- 使用vue.js实现checkbox的全选和多个的删除功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- 实现SELECT的全选,反选,AB选的JAVASCRIPT代码
参考网上,用原生JS粗糙实现. 我发现用UIKIT的BUTTON会自动刷新我那核心的模态窗口,只好用另外的LABEL或CODE标签了. $(".btn-select-all").c ...
随机推荐
- ElasticSearch 介绍、Docker安装以及基本检索第三篇
一.简介 1.1 什么是Elasticsearch? Elasticsearch是一个分布式的开源搜索和分析引擎, 适用于所有类型的数据,包括文本.数字.地理空间.结构化和啡结构化数据.Elastic ...
- 最好的IDEA debug长文?看完我佛了
前言 你好,我是A哥(YourBatman). 最近写了几篇IntelliJ IDEA系列的文章,反响蛮好.我想了下,因为并非是分享什么破解方法.推荐插件.主题这种蛋炒饭式哗众取宠的文章,而是真实对工 ...
- 使用 with as 优化SQL
当我们书写一些结构相对复杂的SQL语句时,可能某个子查询在多个层级多个地方存在重复使用的情况,这个时候我们可以使用 with as 语句将其独立出来,极大提高SQL可读性,简化SQL~ with as ...
- poj3415 Common Substrings (后缀数组+单调队列)
Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 9414 Accepted: 3123 Description A sub ...
- Codeforces Round #652 (Div. 2) C. RationalLee 贪心
题意: t组输入,你有n个数,还有k个朋友,每一个朋友需要wi个数.意思就是你要给第i个朋友分配wi个数,输入保证w1+w2+...+wk=n 一个朋友的兴奋值是你分配给他的数中最大值加上最小值的和( ...
- 哈尔滨理工大学软件与微电子学院程序设计竞赛(同步赛) C.Coronavirus (BFS)
题意:有一个图,要求从\(S\)走到\(E\),\(.\)表示可以走的路径,\(*\)周围的八个方向均不能走,要求判断是否能走到\(E\),若能,输出最小路径长度,否则输出\(Impossible\) ...
- Round Numbers POJ - 3252
题意: 如果你个数的二进制中1的个数要小于等于0的个数,那么这个数就符合题意.现在要你找出来区间[li,ri]这个区间内有多少这样的数 题解: 题意很明显了,是要用二进制,所以我们也把给的区间边界转化 ...
- 设计模式(十八)——观察者模式(JDK Observable源码分析)
1 天气预报项目需求,具体要求如下: 1) 气象站可以将每天测量到的温度,湿度,气压等等以公告的形式发布出去(比如发布到自己的网站或第三方). 2) 需要设计开放型 API,便于其他第三方也能接入气象 ...
- [Golang]-6 超时处理、非阻塞通道操作、通道的关闭和遍历
目录 超时处理 非阻塞通道操作 通道的关闭 通道遍历 超时处理 超时 对于一个连接外部资源,或者其它一些需要花费执行时间的操作的程序而言是很重要的. 得益于通道和 select,在 Go中实现超时操作 ...
- k8s二进制部署 - 总结
镜像仓库: 安装软件:docker.docker-compose.harbor.nginx 1.下载cfssl.cfssljson.cfssl-certinfo,增加执行权限并放在PATH环境变量路径 ...