vue实现按钮多选

需求是这样：

首先考虑使用elementui中的组建实现，但是有时候会忽略组建。实现方式两种：

1.直接使用element实现

let weekTimeData: [

        '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'

      ]

<el-checkbox-group v-model="form.setting_week" class="mr12">

          <el-checkbox-button v-for="(item,index) in weekTimeData" :key="index" :label="item">{{ item }}</el-checkbox-button>

 </el-checkbox-group>

2.使用原生js去实现

<span

          v-for="(item,index) in weekTimeData"

          :key="index"

          :class="{'active':selected.indexOf(item)!=-1}"

          @click="active(index,item)"

 > {{ item }}

</span> 

selected：[]

// 方法

active(index, item) {

    if (this.selected.indexOf(item) !== -1) {

         this.selected.splice(this.selected.indexOf(item), 1); // 取消

    } else {

      this.selected.push(item);// 选中添加到数组里

    }

  this.form.setting_week = this.selected;

  },

//style需要写样式

比较推荐使用elemnt ui的方法，我在开发的时候，忘记了使用element ui，导致多写了几行代码。

巴特西

vue实现按钮多选

最新文章

热门文章