Vue编写多地区选择组件

Vue编写多地区选择组件 本篇文章主要介绍了如何使用 Vue 编写一个多地区选择组件，具有一定的参考价值。该组件支持不限城市和不限地区的选择， 左右两边数据的同步地区一次性多选，若是选择了所有地区会自动转为不限地区。 在编写这个组件时，作者遇到了许多问题。例如，因为这个功能会多次需要切换省份城市这些，所以作者一次性拉取所有数据存储到 localstorage，以避免请求接口次数太多。又例如，不限城市和不限地区的处理，需要剔除不能存在的数据，否则会导致数据混乱。 在编写该组件时，作者使用了 Vue 的一些内置指令，例如 v-for、v-show 等。同时，作者也使用了 SCSS 来预处理 CSS。该组件是一个独立的组件，可以被其他组件调用。 在编写该组件时，作者遇到了很多挑战。例如，左右两边数据的对比是最恶心的，因为左边三级联动的每个子项都有自己的 id 和 name，选择的是组合成的，中间是中划线隔开，这对于推入和推出就带来一堆遍历和比较。 在编写该组件时，作者也遇到了后端大佬说不限制的 id 均为 0（城市或者地区），所以这个需要自行组合，最后就是动态图那格式的 ID 就是后台接受的，多地区再拼接成字符串….‘3-13-2,2-44-3,4-0-0’这种提交到后台。 从这个组件中，我们可以学到很多东西。例如，数组的比对、数组的遍历、数组的组合及响应判断，Vue 一些内置指令的使用，组件功能细节的考虑，不限制地区，全部这些按钮在什么情况下能点击，清空数据之后各个状态的恢复和重置等等。 在编写该组件时，作者使用了 manyAreaSelect.vue 该组件中，author 使用了 template 语法来编写组件的模板，例如使用 v-for 指令来遍历 chinaArea 数组，使用 v-show 指令来控制元素的显示和隐藏。 本篇文章主要介绍了如何使用 Vue 编写一个多地区选择组件，具有一定的参考价值。该组件支持不限城市和不限地区的选择，左右两边数据的同步地区一次性多选，若是选择了所有地区会自动转为不限地区。