最近以为公司业务需要不让用我最爱的elementUI了,刚开始感觉没啥,后来真到开始写了,真的就懵逼,组件不让用啥都得自己写了。。
最常用表格全选都都变成了一个坎。
对于表格全选,我们一定能想到就是判断表格的个数和表格选中的个数相比较,相等全选按钮就处于选中状态,不等就不选中,可是这又不是jQuery,选择器又不能用。对于刚接触vue半年而且大部分时间都在用饿了么组件的我真的是不知所措。
搜了很多资料,看到很多解决方案都是要在数据中加入checked状态,我是拒绝的,就算我愿意后台哥哥也不愿意啊,这不是脏数据嘛!
而且还不是组件式的,谁想用都得copy一大坨代码,我相信我们组长是拒绝的。感觉好难哦。。。
但是问题还是要解决,饭还是要吃的。
回家的想了想,看了看vue的官网,灵感就来了,很快就把解决了。
你以为就这就完了??
全选反选只是checkbox选中,我们的选中是为了获取数据啊,不然选它干啥!
刚开始想为每行的checkbox的click事件传值,后来具体操作发现这是有bug的。然后又各种尝试最后解决了问题。
下面上代码: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
34Vue.component('check-all', {
template: '<input type="checkbox" @click="checkall()" />',
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)
}
}
})
1 | Vue.component('check-item', { |
想自己动手尝试的同学可以点击这里
这是的实现方法,如果大家还有更好的方式,还请赐教,
代码拙劣,如有错误,望指出。
本人原创 如需转载请注明出处