玩转Vue二维表格全选、反选、部分选：一步解锁全能操作

2022-11-13 22:06:50

Vue二维数组全选、全不选、反选、部分全选终极指南

在前端开发中，经常需要处理复杂的数据结构，如二维数组。当这些数组包含大量元素时，手动操作它们可能会变得繁琐且容易出错。为了解决这个问题，Vue提供了便捷的机制，让我们能够轻松地实现全选、全不选、反选和部分全选等操作。在这篇文章中，我们将深入探讨如何使用Vue来实现这些功能，并提供详细的代码示例。

一、全选

全选是最简单的一种操作，只需点击一个按钮，即可选中所有数据。我们使用v-for指令来遍历数据，并使用v-model指令将选中状态绑定到每个元素：

<ul>
  <li v-for="item in items" :key="item.id">
    <input type="checkbox" v-model="item.selected">
    <span>{{ item.name }}</span>
  </li>
</ul>
<button @click="selectAll">全选</button>

<script>
export default {
  methods: {
    selectAll() {
      this.items.forEach(item => {
        item.selected = true;
      });
    }
  }
};
</script>

二、全不选

全不选与全选类似，但需要将所有元素的选中状态设置为false：

<button @click="unselectAll">全不选</button>

<script>
export default {
  methods: {
    unselectAll() {
      this.items.forEach(item => {
        item.selected = false;
      });
    }
  }
};
</script>

三、反选

反选是指将已选元素取消选中，并将未选元素选中。我们可以使用v-for和v-if指令来实现：

<ul>
  <li v-for="item in items" :key="item.id">
    <input type="checkbox" v-model="item.selected">
    <span>{{ item.name }}</span>
  </li>
</ul>
<button @click="reverseSelect">反选</button>

<script>
export default {
  methods: {
    reverseSelect() {
      this.items.forEach(item => {
        item.selected = !item.selected;
      });
    }
  }
};
</script>

四、部分全选

部分全选是指选中父级元素时，自动选中所有子级元素；取消选中父级元素时，自动取消选中所有子级元素。我们可以使用递归来实现：

<ul>
  <li v-for="item in items" :key="item.id">
    <input type="checkbox" v-model="item.selected" @click="selectChildren(item)">
    <span>{{ item.name }}</span>
    <ul v-if="item.children">
      <li v-for="child in item.children" :key="child.id">
        <input type="checkbox" v-model="child.selected">
        <span>{{ child.name }}</span>
      </li>
    </ul>
  </li>
</ul>

<script>
export default {
  methods: {
    selectChildren(item) {
      item.children.forEach(child => {
        child.selected = item.selected;
      });
    }
  }
};
</script>