Vue自定义指令实现checkbox全选功能的方法

Vue自定义指令实现checkbox全选功能的方法

最近做的一个项目需要用到vue实现全选功能，参考了一下网上的做法，发现用属性计算的复用性不高，于是选用自定义指令，但网上的做法大多是会对原始数据有一定的格式要求，而且没有返回结果，于是做了改进。

上代码：

全选

{{item.demo}}

customerResult: {{customerResult}}

通常我们都要获取原始数据中的某个键值，可在“key”中填进想要获取的键值，“result”就是被选中的项了。

有时，我们需要返回一个完整的对象修改一下代码，当不输入key时，返回一个完整的对象数组

this.setValue=()=>{

let result=[]

this.vm[this.params.checkData].forEach((item) => {

//删除checked属性

let temp={};

(()=>delete Object.assign(temp,item).checked)();

item.checked?result.push(item[this.params.key]||temp):"";

});

this.vm[this.params.result]=result

}

但时，这时，返回来的数组中对象中并没有与与原数据是相同的引用地址，当需要使用array.$remove()函数时就会失败，新增一个relative参数，用户自定义判断返回的数据是否与原始数据关联

this.setValue = () => {

let result = []

this.vm[this.params.checkData].forEach((item) => {

if(this.params.relative) {

item.checked ? result.push(item) : "";

}else{

//删除checked属性

let temp = {};

(() => delete Object.assign(temp, item).checked)();

item.checked ? result.push(item[this.params.key] || temp) : "";

}

});

this.vm[this.params.result] = result

}

当数据长度大于2个时，需要判断2N次，相当消耗性能，优化一下：

'check-all', {

twoWay: true,

params: ['checkData', 'result', 'key','relative'],

/*checkData:列表数据,

result:返回的结果,

key:列表数据中需要返回的字段,

relative:是否返回与列表数据相同引用地址的选中结果*/

bind() {

/*提取被选中的项*/

this.setValue = () => {

let result = []

if (this.params.relative) {

this.vm[this.params.checkData].forEach((item) => {

item.checked ? result.push(item) : "";

});

} else {

this.vm[this.params.checkData].forEach((item) => {

//删除checked属性

let temp = {};

(() => delete Object.assign(temp, item).checked)();

item.checked ? result.push(item[this.params.key] || temp) : "";

});

}

this.vm[this.params.result] = result

};

/*为原始数据的每一个对象添加一个checked属性*/

this.addChecked = () => {

this.vm[this.params.checkData].forEach((item) => {

Vue.set(item, 'checked', false)

});

};

/*如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */

this.vm.$watch(this.params.checkData, (data) => {

if(!data.length) return;

data.every((item) => item.checked) ? this.set(true) : this.set(false);

this.setValue()

}, {deep: true});

//当列表发生变化时重新绑定

this.vm.$watch(this.params.checkData, (data) => {

if(!data.length) return

this.addChecked();

});

},

// checkAll发生更改时

update(checkAll) {

/*如果全选框被选中,则将列表的所有checked属性转为true,否则转为false */

checkAll ? this.vm[this.params.checkData].forEach((item) => {

item.checked = true

}) : this.vm[this.params.checkData].forEach((item) => {

item.checked = false

});

this.setValue()

},

}

这时只需要判断N+1次。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。