Vue实现复选框的多选与全选

Vue实现复选框的多选与全选

代码如下：

  <div id="app">
      <table>
        <tr>
          <th>
            <!-- 这是全选复选框（即选中了这个复选框，所有选项复选框都被选中），其绑定数据的v-model为checkedAll，并绑定了改变事件changeAllChecked -->
            <input
              type="checkbox"
              v-model="checkedAll"
              @change="changeAllChecked()"
            />
          </th>
          <th>序号</th>
        </tr>
        <tr>
          <!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
          <td><input type="checkbox" value="1" v-model="checkedItem" /></td>
          <td>1</td>
        </tr>
        <tr>
          <!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
          <td><input type="checkbox" value="2" v-model="checkedItem" /></td>
          <td>2</td>
        </tr>
        <tr>
          <!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
          <td><input type="checkbox" value="3" v-model="checkedItem" /></td>
          <td>3</td>
        </tr>
        <tr>
          <!-- 这是选项复选框，其绑定数据的v-model为checkedItem -->
          <td><input type="checkbox" value="4" v-model="checkedItem" /></td>
          <td>4</td>
        </tr>
      </table>
      </div>


<script>
export default {
  data() {
    return {
      checkedAll: false,
      // 设置选项复选框初始状态为未选中,由于是一个数组,所以值为[],即为空
      checkedItem: [],
      // 设置选中全选复选框后重新给选项复选框赋值,即选中所有的选项复选框
      checkedAttr: ["1", "2", "3", "4", "5"],
    };
  },
  methods: {
    // 全选复选框状态改变监听事件
    changeAllChecked() {
      // 判断全选复选框是否选中
      if (this.checkedAll) {
        // 如果全选复选框被选中,则重新给选项复选框赋值,即选中所有的选项复选框
        this.checkedItem = this.checkedAttr;
      } else {
        // 如果全选复未选框被选中,则设置为空值,即未选中所有的选项复选框
        this.checkedItem = [];
      }
    },
  },
  watch: {
    // 监听复选框项是否全部选中
    checkedItem() {
      // 判断选中选项复选框的值数组的长度是否与设定的长度相等，如果相等则所有的选项复选框被选中，否则没有被选中。
      if (this.checkedItem.length == this.checkedAttr.length) {
        // 如果所有复选框项全部被选中,则全选复选框也被勾选
        this.checkedAll = true;
      } else {
        // 否则复选框不勾选
        this.checkedAll = false;
      }
    },
  },
};
</script>