gistfile1.txt

<template>
  <div class="app">
    <div class="container">
      <div class="main">
        <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <virtual-list class="list" :size="30" :remain="6">
          <div class="list-item" style="height:30px;" v-for="item in items" :key="item.idx">
            <el-checkbox v-model="item.checked" @change="handleCheckItem(item)">table content</el-checkbox>
          </div>
        </virtual-list>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import VirtualList from "vue-virtual-scroll-list";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);

const itemCount = 1000;

let items = [];
for (let idx = 0; idx < itemCount; idx++) {
  items.push({
    idx,
    checked: false
  });
}

export default {
  name: "App",

  components: {
    "virtual-list": VirtualList
  },

  data() {
    return {
      items,
      checkAll: false,
      isIndeterminate: false
    };
  },

  methods: {
    handleCheckAllChange(val) {
      const checked = val ? true : false;
      this.items = this.items.map(i => ({ ...i, checked }));
      this.isIndeterminate = false;
      console.log(this.items);
    },
    handleCheckItem(item) {
      this.items = this.items.map(i => {
        if (i.idx === item.idx) {
          return {
            ...i,
            checked: item.checked
          };
        }
        return i;
      });
      this.checkAll = !this.items.some(i => !i.checked);
      //   this.items = ret;
    }
  }
};
</script>

<style lang="less">
</style>