vue简易表格全选

最近以为公司业务需要不让用我最爱的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