下拉框-多选下拉框的实现方案

前言

记录一下实现一个类似多选下拉框的功能的代码

首先想到的是使用element组件库中的 Collapse 折叠面板 ，但是发现样式很难修改，于是就自己实现一个

实现

实现效果如下

首先需要定义一个数组，存储选中项

const selected = ref([])

其次需要绑定事件与动态样式

    <div v-for="(item,index) in list" :key="index"
         :class="{'active':selected.indexOf(item)!=-1}" @click="active(index,item)">
        <div>
           <span>{{item}}</span>
        </div>
    </div>

最后处理事件

  // selected.indexOf(item) 判断item下标是否为-1，
  // 是-1则数组中匹配不到该数据，添加
  // 不是-1则说明匹配到了，抹除
const active = (index, item) => {
  if (selected.value.indexOf(item) !== -1) {
    selected.value.splice(selected.value.indexOf(item), 1); //取消
  } else {
    selected.value.push(item);//选中添加到数组里
  }
  console.log(JSON.parse(JSON.stringify(selected.value)));
}