Vue+Element-UI：实现三级CheckBox复选框的多状态选择

在Vue项目中，当需要实现一个复杂的三级CheckBox复选框功能时，如果依赖Element-UI库，由于其table组件默认支持的是多选行，不适用于处理多级的选择结构。这篇文章提供了一种解决方案，即如何在Element UI的基础上扩展和自定义三级CheckBox以满足项目需求。 首先，文章强调了使用Flex布局代替Table，因为Flex布局更加灵活，方便后期添加、删除和修改其他功能。在页面布局方面，作者创建了一个名为`deliverySetting-table`的div，其中包含一个`table-head`部分，用于放置全局的全选/反选控件以及列标题。这里使用了一个`el-checkbox`组件，其`v-model`绑定到`ischeckAll`变量，当用户勾选或取消勾选时，会触发`handleCheckAllChange`方法，控制所有子级别的复选框状态。 在`table-body`部分，每个分区（partition）都有自己的选择逻辑。作者引入了一个嵌套的`el-checkbox`，`v-model`绑定到`partition.selected`，当单个分区的复选框状态改变时，会调用`handleCheckedCountryAllChange`方法，传递分区索引、分区ID和事件对象。每个分区下的国家选项同样使用`v-for`循环展示，并关联到`country.selected`，当单个国家的复选框状态变化时，`handleCheckedCountryChange`会被调用。 总结来说，本文主要介绍了如何在Element UI的基础上，通过自定义组件和事件处理函数，构建一个可以实现全选、反选和不确定状态的三级CheckBox复选框系统，以适应多级选择的需求。这种方法不仅适用于当前的项目，也具有很好的可扩展性，方便在后续开发中添加或调整功能。同时，使用Flex布局确保了整个组件的灵活性和易维护性。