vue实现全选功能

下面是详细讲解“Vue.js实现全选功能”的完整攻略，包含两条示例说明：

一、实现思路

要实现全选功能，需要以下几个步骤：

1. 定义一个变量来存储当前是否为全选状态。
2. 绑定checkbox的v-model，将每个checkbox的选中状态绑定到一个数组中。
3. 使用计算属性，判断当前是否处于全选状态，然后绑定全选的checkbox的v-model，实现全选功能。
4. 监听每个checkbox的选中状态变更，当每个checkbox的选中状态都改变时，自动判断是否处于全选状态。

二、示例一

下面是一个示例，演示如何使用Vue.js实现全选功能：

<!-- 多选框列表 -->
<div id="app">
  <div v-for="(item, index) in list" :key="index">
    <input type="checkbox" v-model="selectedList" :value="item.id">
    {{ item.name }}
  </div>
  <!-- 全选按钮 -->
  <div>
    <input type="checkbox" v-model="isAllSelected">
    全选
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    list: [
      { id: 1, name: '选项1' },
      { id: 2, name: '选项2' },
      { id: 3, name: '选项3' }
    ],
    selectedList: [],
    isAllSelected: false
  },
  computed: {
    // 判断是否全部选中
    isAllChecked: function() {
      return this.selectedList.length === this.list.length;
    }
  },
  watch: {
    // 监听全选按钮状态
    isAllSelected: function(val) {
      if (val) {
        this.selectedList = this.list.map(item => item.id);
      } else {
        this.selectedList = [];
      }
    },
    // 监听每个多选框的状态
    selectedList: function(val) {
      this.isAllSelected = this.isAllChecked;
    }
  }
});

三、示例二

下面是一个更加复杂的示例，演示了如何在一个表格中实现多行多列的全选功能：

<!-- 表格 -->
<div id="app">
  <table>
    <thead>
      <tr>
        <th>
          <input type="checkbox" v-model="isAllSelected">
        </th>
        <th v-for="col in columns" :key="col">{{ col }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
        <td>
          <input
            type="checkbox"
            v-model="selectedRows"
            :value="row[rowKey]"
          >
        </td>
        <td v-for="(col, colIndex) in columns" :key="colIndex">
          {{ row[col] }}
        </td>
      </tr>
    </tbody>
  </table>
</div>

new Vue({
  el: '#app',
  data: {
    rows: [
      { id: 1, name: '行1', age: 18 },
      { id: 2, name: '行2', age: 20 },
      { id: 3, name: '行3', age: 22 }
    ],
    columns: ['id', 'name', 'age'],
    rowKey: 'id',
    selectedRows: [],
    isAllSelected: false
  },
  computed: {
    // 获取表格中所有的行主键
    rowKeys: function() {
      return this.rows.map(row => row[this.rowKey]);
    },
    // 判断是否处于全选状态
    isAllChecked: function() {
      return this.rowKeys.length === this.selectedRows.length;
    }
  },
  watch: {
    // 监听全选状态变化，更新选中状态
    isAllSelected: function(val) {
      if (val) {
        this.selectedRows = this.rowKeys;
      } else {
        this.selectedRows = [];
      }
    },
    // 监听选中状态变化，更新全选状态
    selectedRows: function(val) {
      this.isAllSelected = this.isAllChecked;
    }
  }
});

注意，这个示例中，我们需要定义一个rowKey变量来表示每个数据行的主键。这个变量的作用是，用来区分每一行数据。在上面的代码中，我们使用 :value="row[rowKey]" 和 this.rowKeys 来确定每个checkbox的选中状态。在实践中，我们需要根据表格的结构和数据来源来决定如何设置主键。