vue簡易表格全選

Denny-coder發表於2017-12-14
Vue
最近以為公司業務需要不讓用我最愛的**elementUI**了，剛開始感覺沒啥，後來真到開始寫了，真的就懵逼，元件不讓用啥都得自己寫了。。

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

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

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

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

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

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

你以為就這就完了？？


vue簡易表格全選

全選反選只是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)
    },
  }
  })
複製程式碼

想自己動手嘗試的同學可以點選[這裡](https://jsfiddle.net/Denny_code/84d7224x/2/)

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


程式碼拙劣，如有錯誤，望指出。 

本人原創 如需轉載請註明出處 bestzhengke.com/2017/12/14/…







相關文章