最近以為公司業務需要不讓用我最愛的elementUI了，剛開始感覺沒啥，后來真到開始寫了，真的就懵逼，組件不讓用啥都得自己寫了。。

最常用表格全選都都變成了一個坎。

對于表格全選，我們一定能想到就是判斷表格的個數和表格選中的個數相比較，相等全選按鈕就處于選中狀態，不等就不選中，可是這又不是jQuery，選擇器又不能用。對于剛接觸vue半年而且大部分時間都在用餓了么組件的我真的是不知所措。

搜了很多資料，看到很多解決方案都是要在數據中加入checked狀態，我是拒絕的，就算我愿意后臺哥哥也不愿意啊，這不是臟數據嘛！

而且還不是組件式的，誰想用都得copy一大坨代碼，我相信我們組長是拒絕的。感覺好難哦。。。

但是問題還是要解決，飯還是要吃的。

回家的想了想，看了看vue的官網，靈感就來了，很快就把解決了。

get-post-6.jpg

全選反選只是checkbox選中，我們的選中是為了獲取數據啊，不然選它干啥！

剛開始想為每行的checkbox的click事件傳值，后來具體操作發現這是有bug的。然后又各種嘗試最后解決了問題。

下面上代碼：

Vue.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)
      }
    }
  })

Vue.component('check-item', {
    template: '<input type="checkbox" @click="checkitem()" />',
    // 技術上 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)
      },
    }
  })

想自己動手嘗試的同學可以點擊這里

這是的實現方法，如果大家還有更好的方式，還請賜教，

代碼拙劣，如有錯誤，望指出。 > 本人原創 如需轉載請注明出處

本人原創 如需轉載請注明出處 http://bestzhengke.com/2017/12/14/vue%E7%AE%80%E6%98%93%E8%A1%A8%E6%A0%BC%E5%85%A8%E9%80%89/#more