全选反选只是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/)
这是的实现方法,如果大家还有更好的方式,还请赐教,
代码拙劣,如有错误,望指出。本人原创 如需转载请注明出处