时间:2021-07-01 10:21:17 帮助过:6人阅读
最近做的一个项目需要用到Vue实现全选功能,参考了一下网上的做法,发现用属性计算的复用性不高,于是选用自定义指令,但网上的做法大多是会对原始数据有一定的格式要求,而且没有返回结果,于是做了改进。
上代码:
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- </head>
- <body>
- <div id="app">
- <input type="checkbox" v-model="allCheck" v-check-all="allCheck" check-data="list" result="customerResult" key="demo"> 全选
- <ul>
- <li v-for="item in list">
- <input type="checkbox" v-model="item.checked">
- {{item.demo}}
- </li>
- </ul>
- <div >
- customerResult: {{customerResult}}
- </div>
- </div>
- <script src="vue.js"></script>
- <script>
- var vm = new Vue({
- el: "#app",
- data:function(){
- return {
- list:[{demo:1},
- {demo:2},
- {demo:3}],
- allCheck:'',
- customerResult:'',
- }
- },
- directives: {
- 'check-all': {
- twoWay: true,
- params: ['checkData','result','key'],
- bind() {
- /*为原始数据的每一个对象添加一个checked属性*/
- this.vm[this.params.checkData].forEach((item)=>{
- Vue.set(item,'checked',false)
- });
- /*提取被选中的项*/
- this.setValue=function(){
- let result=[]
- this.vm[this.params.checkData].forEach((item) => {
- if(item.checked){
- result.push(item[this.params.key])
- }
- });
- this.vm[this.params.result]=result
- }
- /*如果所有的列表的checked属性都为true,则选中全选框,否则不选中全选框 */
- this.vm.$watch(this.params.checkData, (data) => {
- if(data.every((item) => item.checked)) {
- this.set(true);
- } else {
- this.set(false);
- }
- this.setValue()
- }, {deep: true});
- },
- // checkAll发生更改时
- update(checkAll) {
- /*如果全选框被选中,则将列表的所有checked属性转为true,否则转为false */
- if(checkAll) {
- this.vm[this.params.checkData].forEach((item) => {
- item.checked = true;
- });
- } else {
- this.vm[this.params.checkData].forEach((item) => {
- item.checked = false;
- });
- }
- this.setValue()
- },
- },
- }
- })
- </script>
- </body>
- </html>
通常我们都要获取原始数据中的某个键值,可在“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次。
以上这篇Vue自定义指令实现checkbox全选功能的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。