博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue简易表格全选
阅读量:5882 次
发布时间:2019-06-19

本文共 2280 字,大约阅读时间需要 7 分钟。

最近以为公司业务需要不让用我最爱的**elementUI**了,刚开始感觉没啥,后来真到开始写了,真的就懵逼,组件不让用啥都得自己写了。。
最常用表格全选都都变成了一个坎。
对于表格全选,我们一定能想到就是判断表格的个数和表格选中的个数相比较,相等全选按钮就处于选中状态,不等就不选中,可是这又不是**jQuery**,选择器又不能用。对于刚接触vue半年而且大部分时间都在用饿了么组件的我真的是不知所措。
搜了很多资料,看到很多解决方案都是要在数据中加入**checked**状态,我是拒绝的,就算我愿意后台哥哥也不愿意啊,这不是脏数据嘛!
而且还不是组件式的,谁想用都得copy一大坨代码,我相信我们组长是拒绝的。感觉好难哦。。。
但是问题还是要解决,饭还是要吃的。
回家的想了想,看了看vue的官网,灵感就来了,很快就把解决了。
你以为就这就完了??

全选反选只是checkbox选中,我们的选中是为了获取数据啊,不然选它干啥!
刚开始想为每行的checkbox的click事件传值,后来具体操作发现这是有bug的。然后又各种尝试最后解决了问题。
下面上代码:

Vue.component('check-all', {  template: '',  props: {    // 必须为string类型    data: {    type: String,    },  },  methods: {    checkall: function() {    var data = this.data?this.data:"list";    var row = this.$root.$refs[data].rows;    var arr = [];    var sels = [];    for (var i = 1; i < row.length; i++) {      if (row[i].children[0].children[0].checked) {      arr.push(row[i].children[0].children[0].checked);      };    };    if (arr.length === row.length - 1) {      for (var i = 1; i < row.length; i++) {        row[i].children[0].children[0].checked = false;      }    } else {      for (var i = 1; i < row.length; i++) {      row[i].children[0].children[0].checked = true;      sels.push(this.$root[data][row[i - 1].rowIndex]);      }    }    this.$emit('ymhy-select-all', sels)    }  }  })复制代码

Vue.component('check-item', {  template: '',  // 技术上 data 的确是一个函数了,因此 Vue 不会警告,  // 但是我们却给每个组件实例返回了同一个对象的引用  props: {    // 数组/对象的默认值应当由一个工厂函数返回    data: {    type: String,    },  },  data: function() {    return {}  },  methods: {    checkitem: function() {    var data = this.data ? this.data : "list";    var row = this.$root.$refs[data].rows;    var arr = [];    var sels = [];    for (var i = 1; i < row.length; i++) {      if (row[i].children[0].children[0].checked) {      arr.push(row[i].children[0].children[0].checked);      sels.push(this.$root[data][row[i - 1].rowIndex]);      };    }       if (arr.length === row.length - 1) {      row[0].children[0].children[0].checked = true;    } else {      row[0].children[0].children[0].checked = false;    }    this.$emit('ymhy-select-item', sels)    },  }  })复制代码

想自己动手尝试的同学可以点击[这里](https://jsfiddle.net/Denny_code/84d7224x/2/)

这是的实现方法,如果大家还有更好的方式,还请赐教,

代码拙劣,如有错误,望指出。 

本人原创 如需转载请注明出处 

转载于:https://juejin.im/post/5a323e8b5188257dd239abd7

你可能感兴趣的文章
长春理工大学第十四届程序设计竞赛(重现赛)I.Fate Grand Order
查看>>
好作品地址
查看>>
[翻译]Protocol Buffer 基础: C++
查看>>
runloop与线程的关系
查看>>
[Bzoj2246]迷宫探险(概率+DP)
查看>>
详解消息队列的设计与使用
查看>>
使用Sqoop从mysql向hdfs或者hive导入数据时出现的一些错误
查看>>
控制子窗口的高度
查看>>
处理 Oracle SQL in 超过1000 的解决方案
查看>>
Alpha线性混合实现半透明效果
查看>>
chkconfig 系统服务管理
查看>>
ORACLE---Unit04: SQL(高级查询)
查看>>
贪食蛇
查看>>
201521123009 《Java程序设计》第11周学习总结
查看>>
Python3之多线程学习
查看>>
MVC和MTV结构分析
查看>>
(转)微信网页扫码登录的实现
查看>>
mariadb启动报错:[ERROR] Can't start server : Bind on unix socket: Permission denied
查看>>
nginx的信号量
查看>>
云im php,网易云IM
查看>>