首先说一下遇到这种问题的解决思路吧,很简单先去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标签全选以及出现需要有禁用选项的更多相关文章

  1. jQ给下拉框绑定事件,为什么要绑定在框(select标签)上,而不是绑定在选项(option标签)上

    这是我在学习锋利的 jquery 书中 5.1.4 的代码时遇到的一个小问题,源代码如下: <head> <style type="text/css"> * ...

  2. vue实现下拉框全选和输入匹配

    实际项目中的一个需求: 点击文本框,弹出带有复选框的选项,然后获取选中项的数据,传给后面的一个功能.在文本框输入内容,也会动态的匹配下拉列表,并且列表带有全选功能. 朴素的效果图: 我选择了用vue实 ...

  3. vue.js 批量删除跟全选,反选效果

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  4. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...

  5. vue开发购物车,解决全选单选问题

    实现全选单选,在vue中无法通过this获取input中的checkbox的checked属性,但是可以通过vue对input的特殊方式v-model来实现对应数据的绑定,同样也可以通过这种方式实现购 ...

  6. Jquery 遍历 Table;遍历CheckBox ;遍历Select;全选/全不选

    关于Jquery:相信大家已经很熟悉了,我最近的项目运用到关于Jquery的遍历事件:权当总结下: 遍历Table <table  id="thistab"> < ...

  7. vue+vant实现购物车的全选和反选业务,带你研究购物车的那些细节!

    前言 喜欢购物的小伙伴看过来,你们期待已久的购物车来啦!相信小伙伴逛淘宝时最擅长的就是加入购物车了,那购物车是如何实现商品全选反选的呢?今天就带你们研究购物车的源码,以vue+vant为例. 正文 首 ...

  8. 使用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 ...

  9. 实现SELECT的全选,反选,AB选的JAVASCRIPT代码

    参考网上,用原生JS粗糙实现. 我发现用UIKIT的BUTTON会自动刷新我那核心的模态窗口,只好用另外的LABEL或CODE标签了. $(".btn-select-all").c ...

随机推荐

  1. liux 常用操作命令

    tail -f /home/jyapp/apache-tomcat-7.0.59/logs/catalina.out  //查看实施日志 //删除临时目录并且启动服务器 rm -rf /home/jy ...

  2. dedecms文章页的上下篇颠倒的问题

    dedecms的文章页底下的上下篇,如果按照时间排序的话,最新的一篇应该是最上了,但是底下还是会显示上一篇文章还有,然后下一篇文章没有了,就是颠倒了.如何修改呢. 1.修改include目录下arc. ...

  3. Redis-第七章节-持久化

    目录 概述 RDB AOF 如何选择持久化机制 1.概述 Redis 是内存数据库,如果不能将内存中的数据保存到磁盘中,那么一旦服务器进程退出,服务器的数据库数据也会消失,所以Redis提供了持久化的 ...

  4. 【uva 1515】Pool construction(图论--网络流最小割 模型题)

    题意:有一个水塘,要求把它用围栏围起来,每个费用为b.其中,(#)代表草,(.)代表洞,把一个草变成洞需要费用d, 把一个洞变成草需要费用f.请输出合法方案中的最小费用. 解法:(不好理解...... ...

  5. 【bzoj 3333】排队计划(线段树)

    n个数,求一次逆序对.接着有m次修改操作,把每次输入的位置p的数之后<=它的数取出来,从小到大排序后再放回空位里,求逆序对.(N,M<=500,000 , Ai<=10^9)思路:1 ...

  6. poj3585 Accumulation Degree(树形dp,换根)

    题意: 给你一棵n个顶点的树,有n-1条边,每一条边有一个容量z,表示x点到y点最多能通过z容量的水. 你可以任意选择一个点,然后从这个点倒水,然后水会经过一些边流到叶节点从而流出.问你最多你能倒多少 ...

  7. Codeforces Round #555 (Div. 3) E. Minimum Array (贪心,二分,set)

    题意:给你两个长度为\(n\)的数组\(a\)和\(b\),元素值在\([0,n-1]\),可以对\(b\)数组的元素任意排序,求新数组\(c\),满足\(c_i=(a_i+b_i)\ mod\ n\ ...

  8. Codeforces Round #575 (Div. 3) E. Connected Component on a Chessboard

    传送门 题意: 给你一个黑白相间的1e9*1e9的棋盘,你需要从里面找出来由b个黑色的格子和w个白色的格子组成的连通器(就是你找出来的b+w个格子要连接在一起,不需要成环).问你可不可以找出来,如果可 ...

  9. Linux系统编程【2】——编写who命令

    学到的知识点 通过实现who命令,学到了: 1.使用man命令寻找相关信息 2.基于文件编程 3.体会到c库函数与系统调用的不同 4.加深对缓冲技术的理解 who命令的作用 who命令的使用 在控制终 ...

  10. mysql-画图

    目录 阿里数据库产品rds 淘宝数据库架构 数据库下载 Mysql3种安装方法 mysql_install_db安装数据库命令脚本中有生成初始mysql数据 也可以把mysql_install_db集 ...