vue字典复选框全选全不选

以下是一个Vue字典复选框全选/全不选的例子：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th><input type="checkbox" v-model="selectAll" @click="checkAll"></th>
          <th>Key</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(value, key) in dict" :key="key">
          <td><input type="checkbox" v-model="selected" :value="key"></td>
          <td>{{ key }}</td>
          <td>{{ value }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dict: {
        key1: 'value1',
        key2: 'value2',
        key3: 'value3'
      },
      selected: [],
      selectAll: false
    }
  },
  methods: {
    checkAll() {
      this.selected = []
      if (this.selectAll) {
        for (let key in this.dict) {
          this.selected.push(key)
        }
      }
    }
  },
  watch: {
    selected(newVal) {
      if (newVal.length === Object.keys(this.dict).length) {
        this.selectAll = true
      } else {
        this.selectAll = false
      }
    }
  }
}
</script>

在这个例子中，我们使用了一个字典来存储数据，然后使用`v-for`指令将字典中的每个键值对渲染为一个表格行。我们在表格头部添加了一个复选框，用于全选/反选所有的复选框。当用户点击表格头部的复选框时，我们调用了`checkAll`方法来更新`selected`数组，该数组存储了所有被选中的键。我们还使用了一个`watch`来监听`selected`数组的变化，并根据数组的长度来更新表格头部的复选框的状态。