用 Vue.js 实现多级全选功能实战教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，常常需要用到多级选择和全选功能。Vue.js 是一款流行的前端框架，提供了方便的数据绑定和组件化开发方式，可以快速实现多级全选功能。本文将介绍如何用 Vue.js 实现多级全选功能，并提供示例代码。

实现思路

实现多级全选功能的基本思路是：通过绑定数据和事件，控制选中状态的变化。具体来说，我们需要实现以下几个步骤：

定义数据模型：定义多级数据模型，包含多个层级和多个选项。
显示数据：将数据模型渲染到页面，形成多级选择结构。
绑定事件：绑定选中状态变化的事件，实现多级选择和全选功能。
控制状态：根据选中状态的变化，控制数据模型的变化，实现多级全选功能。

下面我们将逐步实现这些步骤。

定义数据模型

首先，我们需要定义一个多级数据模型，包含多个层级和多个选项。我们可以使用 JSON 格式来定义数据模型，如下所示：

// javascriptcn.com 代码示例
[
  {
    "name": "Level 1 - A",
    "selected": false,
    "children": [
      {
        "name": "Level 2 - A1",
        "selected": false,
        "children": [
          {
            "name": "Option 1",
            "selected": false
          },
          {
            "name": "Option 2",
            "selected": false
          }
        ]
      },
      {
        "name": "Level 2 - A2",
        "selected": false,
        "children": [
          {
            "name": "Option 3",
            "selected": false
          },
          {
            "name": "Option 4",
            "selected": false
          }
        ]
      }
    ]
  },
  {
    "name": "Level 1 - B",
    "selected": false,
    "children": [
      {
        "name": "Level 2 - B1",
        "selected": false,
        "children": [
          {
            "name": "Option 5",
            "selected": false
          },
          {
            "name": "Option 6",
            "selected": false
          }
        ]
      },
      {
        "name": "Level 2 - B2",
        "selected": false,
        "children": [
          {
            "name": "Option 7",
            "selected": false
          },
          {
            "name": "Option 8",
            "selected": false
          }
        ]
      }
    ]
  }
]

在这个数据模型中，我们定义了两个层级（Level 1 和 Level 2），每个层级包含多个选项（Option），并且每个选项都有一个选中状态（selected）。初始状态下，所有选项的选中状态都为 false。

显示数据

接下来，我们需要将数据模型渲染到页面中，形成多级选择结构。我们可以使用 Vue.js 的模板语法来实现页面的渲染。具体来说，我们需要使用 v-for 指令来遍历数据模型，并使用 v-bind 指令将数据模型中的属性绑定到页面元素上。示例代码如下：

// javascriptcn.com 代码示例
<template>
  <div class="multiselect">
    <div v-for="(level1, index1) in data" :key="index1" class="level1">
      <label>
        <input type="checkbox" v-model="level1.selected" @change="onLevel1Change(index1)">
        {{ level1.name }}
      </label>
      <div v-for="(level2, index2) in level1.children" :key="index2" class="level2">
        <label>
          <input type="checkbox" v-model="level2.selected" @change="onLevel2Change(index1, index2)">
          {{ level2.name }}
        </label>
        <div v-for="(option, index3) in level2.children" :key="index3" class="option">
          <label>
            <input type="checkbox" v-model="option.selected" @change="onOptionChange(index1, index2, index3)">
            {{ option.name }}
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

在这个模板中，我们使用 v-for 指令遍历数据模型中的每个层级和选项，并使用 v-bind 指令将选中状态绑定到复选框的 checked 属性上。同时，我们在每个复选框上绑定了一个 change 事件，用于在选中状态变化时触发相应的事件处理函数。

绑定事件

接下来，我们需要绑定选中状态变化的事件，实现多级选择和全选功能。具体来说，我们需要实现以下几个事件处理函数：

onLevel1Change：当 Level 1 选中状态发生变化时，更新 Level 2 和 Option 的选中状态。
onLevel2Change：当 Level 2 选中状态发生变化时，更新 Option 的选中状态。
onOptionChange：当 Option 选中状态发生变化时，更新 Level 2 和 Level 1 的选中状态。

示例代码如下：

// javascriptcn.com 代码示例
export default {
  data() {
    return {
      data: [/* 数据模型 */]
    }
  },
  methods: {
    onLevel1Change(index1) {
      const level1 = this.data[index1]
      level1.children.forEach(level2 => {
        level2.selected = level1.selected
        level2.children.forEach(option => {
          option.selected = level2.selected
        })
      })
    },
    onLevel2Change(index1, index2) {
      const level1 = this.data[index1]
      const level2 = level1.children[index2]
      level2.children.forEach(option => {
        option.selected = level2.selected
      })
      level1.selected = level1.children.every(level2 => level2.selected)
    },
    onOptionChange(index1, index2, index3) {
      const level1 = this.data[index1]
      const level2 = level1.children[index2]
      const option = level2.children[index3]
      level2.selected = level2.children.every(option => option.selected)
      level1.selected = level1.children.every(level2 => level2.selected)
    }
  }
}

在这些事件处理函数中，我们通过修改数据模型中的选中状态，控制页面上各个复选框的选中状态。具体来说，当 Level 1 选中状态发生变化时，我们需要遍历所有 Level 2 和 Option，更新它们的选中状态。当 Level 2 选中状态发生变化时，我们需要遍历所有 Option，更新它们的选中状态，并更新 Level 1 的选中状态。当 Option 选中状态发生变化时，我们需要更新 Level 2 和 Level 1 的选中状态。

控制状态

最后，我们需要根据选中状态的变化，控制数据模型的变化，实现多级全选功能。具体来说，我们需要在数据模型中添加一个 computed 属性，用于计算各个层级和选项的选中状态。示例代码如下：

// javascriptcn.com 代码示例
export default {
  data() {
    return {
      data: [/* 数据模型 */]
    }
  },
  computed: {
    level1Selected() {
      return this.data.every(level1 => level1.selected)
    },
    level2Selected() {
      return this.data.every(level1 => {
        return level1.children.every(level2 => level2.selected)
      })
    },
    optionSelected() {
      return this.data.every(level1 => {
        return level1.children.every(level2 => {
          return level2.children.every(option => option.selected)
        })
      })
    }
  },
  methods: {
    /* 事件处理函数 */
  }
}

在这个 computed 属性中，我们使用 every 方法遍历数据模型中的各个层级和选项，判断它们的选中状态是否全部为 true。根据不同的层级和选项，我们定义了三个 computed 属性：level1Selected 表示 Level 1 的选中状态，level2Selected 表示 Level 2 的选中状态，optionSelected 表示 Option 的选中状态。

最后，我们需要将这些 computed 属性绑定到页面上，实现多级全选功能。示例代码如下：

// javascriptcn.com 代码示例
<template>
  <div class="multiselect">
    <div class="level1">
      <label>
        <input type="checkbox" v-model="level1Selected" @change="onLevel1ChangeAll">
        Level 1 - All
      </label>
      <div class="level2">
        <label>
          <input type="checkbox" v-model="level2Selected" @change="onLevel2ChangeAll">
          Level 2 - All
        </label>
        <div class="option">
          <label>
            <input type="checkbox" v-model="optionSelected" @change="onOptionChangeAll">
            Option - All
          </label>
        </div>
      </div>
    </div>
    <!-- 其他内容 -->
  </div>
</template>

在这个模板中，我们使用 v-model 指令将 computed 属性绑定到复选框的选中状态上，从而实现多级全选功能。同时，我们在每个全选复选框上绑定了一个 change 事件，用于在选中状态变化时触发相应的事件处理函数。

示例代码

最终的示例代码如下：

// javascriptcn.com 代码示例
<template>
  <div class="multiselect">
    <div class="level1">
      <label>
        <input type="checkbox" v-model="level1Selected" @change="onLevel1ChangeAll">
        Level 1 - All
      </label>
      <div class="level2">
        <label>
          <input type="checkbox" v-model="level2Selected" @change="onLevel2ChangeAll">
          Level 2 - All
        </label>
        <div class="option">
          <label>
            <input type="checkbox" v-model="optionSelected" @change="onOptionChangeAll">
            Option - All
          </label>
        </div>
      </div>
    </div>
    <div v-for="(level1, index1) in data" :key="index1" class="level1">
      <label>
        <input type="checkbox" v-model="level1.selected" @change="onLevel1Change(index1)">
        {{ level1.name }}
      </label>
      <div v-for="(level2, index2) in level1.children" :key="index2" class="level2">
        <label>
          <input type="checkbox" v-model="level2.selected" @change="onLevel2Change(index1, index2)">
          {{ level2.name }}
        </label>
        <div v-for="(option, index3) in level2.children" :key="index3" class="option">
          <label>
            <input type="checkbox" v-model="option.selected" @change="onOptionChange(index1, index2, index3)">
            {{ option.name }}
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          "name": "Level 1 - A",
          "selected": false,
          "children": [
            {
              "name": "Level 2 - A1",
              "selected": false,
              "children": [
                {
                  "name": "Option 1",
                  "selected": false
                },
                {
                  "name": "Option 2",
                  "selected": false
                }
              ]
            },
            {
              "name": "Level 2 - A2",
              "selected": false,
              "children": [
                {
                  "name": "Option 3",
                  "selected": false
                },
                {
                  "name": "Option 4",
                  "selected": false
                }
              ]
            }
          ]
        },
        {
          "name": "Level 1 - B",
          "selected": false,
          "children": [
            {
              "name": "Level 2 - B1",
              "selected": false,
              "children": [
                {
                  "name": "Option 5",
                  "selected": false
                },
                {
                  "name": "Option 6",
                  "selected": false
                }
              ]
            },
            {
              "name": "Level 2 - B2",
              "selected": false,
              "children": [
                {
                  "name": "Option 7",
                  "selected": false
                },
                {
                  "name": "Option 8",
                  "selected": false
                }
              ]
            }
          ]
        }
      ]
    }
  },
  computed: {
    level1Selected() {
      return this.data.every(level1 => level1.selected)
    },
    level2Selected() {
      return this.data.every(level1 => {
        return level1.children.every(level2 => level2.selected)
      })
    },
    optionSelected() {
      return this.data.every(level1 => {
        return level1.children.every(level2 => {
          return level2.children.every(option => option.selected)
        })
      })
    }
  },
  methods: {
    onLevel1Change(index1) {
      const level1 = this.data[index1]
      level1.children.forEach(level2 => {
        level2.selected = level1.selected
        level2.children.forEach(option => {
          option.selected = level2.selected
        })
      })
    },
    onLevel2Change(index1, index2) {
      const level1 = this.data[index1]
      const level2 = level1.children[index2]
      level2.children.forEach(option => {
        option.selected = level2.selected
      })
      level1.selected = level1.children.every(level2 => level2.selected)
    },
    onOptionChange(index1, index2, index3) {
      const level1 = this.data[index1]
      const level2 = level1.children[index2]
      const option = level2.children[index3]
      level2.selected = level2.children.every(option => option.selected)
      level1.selected = level1.children.every(level2 => level2.selected)
    },
    onLevel1ChangeAll() {
      const level1Selected = !this.level1Selected
      this.data.forEach(level1 => {
        level1.selected = level1Selected
        level1.children.forEach(level2 => {
          level2.selected = level1Selected
          level2.children.forEach(option => {
            option.selected = level1Selected
          })
        })
      })
    },
    onLevel2ChangeAll() {
      const level2Selected = !this.level2Selected
      this.data.forEach(level1 => {
        level1.children.forEach(level2 => {
          level2.selected = level2Selected
          level2.children.forEach(option => {
            option.selected = level2Selected
          })
        })
        level1.selected = level1.children.every(level2 => level2.selected)
      })
    },
    onOptionChangeAll() {
      const optionSelected = !this.optionSelected
      this.data.forEach(level1 => {
        level1.children.forEach(level2 => {
          level2.children.forEach(option => {
            option.selected = optionSelected
          })
          level2.selected = level2.children.every(option => option.selected)
        })
        level1.selected = level1.children.every(level2 => level2.selected)
      })
    }
  }
}

总结

通过本文的介绍，我们可以看到使用 Vue.js 实现多级全选功能是非常简单的。通过绑定数据和事件，我们可以轻松地控制选中状态的变化，实现多级选择和全选功能。同时，我们还可以通过 computed 属性来计算各个层级和选项的选中状态，实现多级全选功能。希望本文能够对大家学习和使用 Vue.js 有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650f19e395b1f8cacd80414a