집 > 기사 > 웹 프론트엔드 > 체크박스 선택 기능을 구현하기 위해 Vue에서 사용자 정의 명령어를 작동하는 방법

체크박스 선택 기능을 구현하기 위해 Vue에서 사용자 정의 명령어를 작동하는 방법

亚连원래의: 2018-06-02 17:26:102379검색

이제 Vue 사용자 정의 명령어를 사용하여 체크박스 선택 기능을 구현하는 방법을 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

최근 작업한 프로젝트에서는 모두 선택 기능을 구현하기 위해 Vue를 사용해야 했습니다. 온라인 방법을 참조한 결과 속성 계산의 재사용성이 높지 않아 대부분의 온라인 지침을 선택했습니다. 메서드는 특정 형식 요구 사항이 있었고 결과가 반환되지 않았으므로 개선되었습니다.

위 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <p 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> 
  <p >
   customerResult: {{customerResult}}
  </p>
  </p>
  <script src="vue.js"></script>
  <script>
   var vm = new Vue({
    el: "#app",
    data:function(){
     return {
      list:[{demo:1},
      {demo:2},
      {demo:3}],
      allCheck:&#39;&#39;,
      customerResult:&#39;&#39;,
     }
    },
    directives: {
     &#39;check-all&#39;: {
      twoWay: true,
      params: [&#39;checkData&#39;,&#39;result&#39;,&#39;key&#39;],
      bind() {
       /*为原始数据的每一个对象添加一个checked属性*/
       this.vm[this.params.checkData].forEach((item)=>{
        Vue.set(item,&#39;checked&#39;,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"가 됩니다. 선택한 하나의 항목.
때로는 완전한 객체를 반환하고 코드를 수정해야 할 때가 있습니다. 키를 입력하지 않으면 객체의 전체 배열이 반환됩니다.

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() 함수를 사용해야 하는 경우 새 상대 매개변수가 추가됩니다. 사용자는 반환된 데이터가 원본과 관련되어 있는지 여부를 사용자 정의할 수 있습니다. data

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번 판단해야 하므로 성능이 많이 소모됩니다. 최적화:

&#39;check-all&#39;, {
  twoWay: true,
  params: [&#39;checkData&#39;, &#39;result&#39;, &#39;key&#39;,&#39;relative&#39;],
  /*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, &#39;checked&#39;, 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에서 사용자 정의 명령어를 작동하는 방법

관련 기사