VUE实现级联选择框与选项互斥

原创

已于 2023-08-17 08:32:01 修改 · 959 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #anti-design-vue #javascript #es6

于 2023-06-13 14:54:49 首次发布

文章介绍了如何在Vue.js应用中实现级联选择功能，特别是如何根据一级选项查询并显示二级选项，以及确保二级选项的互斥性，即一旦一个二级选项被选中，其他地方不能再选中它。主要涉及的数据结构有questions、primaryIndicators、secondaryIndicatorkeys等，以及使用select和deselect事件来监听和控制选项状态。

需求

功能布局如下图，实现根据一级选项的code去查询二级选项，并且其他二级选择框无法再次选中已经被选的二级选项。

代码实现

HTML

一级选择框：

<div style="margin-top: 20px;" v-for="(item, index) in questions" :key="index">
                    <span><span style="color: red;">*</span>问题类别：</span>
                    <a-select style="width: 240px;"            :value="item.primaryIndicators.itemCode"
                        @change="handleChangetypes(index,$event)">
                        <a-select-option v-for="itemone,ccindex in problemTypeoptions" :key="itemone.itemCode+ccindex"
                            :value="itemone.itemCode">{
  
  { itemone.itemName }}
                        </a-select-option>
                    </a-select>

二级选择框：

<a-select :showSearch="false" style="width: 240px;margin-left: 40px;" mode="multiple"
                        @change="handlechildtypes(index, item.secondaryIndicatorkeys)"
                        v-model:value="item.secondaryIndicatorkeys">
                        <a-select-op