1. 程式人生 > 其它 >vue實現按鈕多選

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,導致多寫了幾行程式碼。