iView框架Select组件

问题描述

先看看Select组件的意思：

简单来说，就是下拉选择，可以多选可以单选。如果是多选，绑定的数据就是数组，否则就是单个数据。

有个需求，在Vue中使用Select组件，支持多选，选择某一项，使它与其他项互斥。也就是说，假设这一项叫A，选择A时就必须移除选择的其他选项，而选择其他选项时可以多选不受限制。

本文将使用简单的伪代码描述逻辑，并不是直接就能用的代码。

代码实现

先给出一部分JS代码：

data(){
    return {
        // Select绑定的数组
        select_list: [],
        // 选项数组
        options_list: ['A', '选项2', '选项3', '选项4', '选项5']
    }
}

使用Select组件：

<Select v-model="select_list" multiple>
    <Option v-for="item in options_list" :value="item" :key="item"></Option>
</Select>

逻辑