element-ui select 多选框+checkbox 混合用遇到的问题

Question

如图，我点击checkbox组件会触发select的change事件，然后勾选框会勾不上（确切说是勾上又取消掉了，因为触发了select的change事件），怎样才能让着两个点击事件分开，或者更好的办法？
代码如下：
html:

<el-select v-model="peroidForm.weekCheckList" multiple @change="(val) => handleWeekChange(val)">
                <el-option
                  v-for="(item, index) in weekList"
                  :key="index"
                  :value="item.value"
                  :label="item.label"
                >
                  <el-checkbox v-model="item.isCheck" @change="(val) =>handleCheckBoxWeekChange(val, item)"></el-checkbox>
                  <span style="margin-left: 8px">{{item.label}}</span>
                </el-option>
              </el-select>

data

data () {
    return {
        frequencyEditForm: {
            weekCheckList: []
        },
        weekList: [
        {
          value: '星期一',
          label: '周一',
          isCheck: false
        },
        {
          value: '星期二',
          label: '周二',
          isCheck: false
        },
        {
          value: '星期三',
          label: '周三',
          isCheck: false
        },
        {
          value: '星期四',
          label: '周四',
          isCheck: false
        },
        {
          value: '星期五',
          label: '周五',
          isCheck: false
        },
        {
          value: '星期六',
          label: '周六',
          isCheck: false
        },
        {
          value: '星期日',
          label: '周日',
          isCheck: false
        }
      ],
    }
}

js:

// select下拉框的change事件
handleWeekChange (val) {
      this.weekList.forEach((v) => {
        v.isCheck = false
      })
      val.forEach((el) => {
        this.weekList.forEach((v) => {
          if (el === v.value) {
            v.isCheck = true
          }
        })
      })
    },
 // checkbox change事件
 handleCheckBoxWeekChange (val, item) {
      if (val) {
        this.frequencyEditForm.weekCheckList.push(item.value)
      } else {
        let index = this.frequencyEditForm.weekCheckList.findIndex((ele) => ele.value === item.value)
        this.frequencyEditForm.weekCheckList.splice(index)
      }
    }

Answer 1

<el-select v-model="frequencyEditForm.weekCheckList" multiple>

 <el-option
    v-for="(item, index) in weekList"
    :key="index"
    :value="item.value"
    :label="item.label"
  >
   <span class="check"></span>
   <span style="margin-left: 8px">{{item.label}}</span>
  </el-option>
</el-select>


<style scoped>

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after{

content: "";

}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check{

background-color: #409eff;
border-color: #409eff;

}

.el-select-dropdown.is-multiple .el-select-dropdown__item.selected .check:after{

transform: rotate(45deg) scaleY(1);

}

.el-select-dropdown.is-multiple .el-select-dropdown__item .check::after{

box-sizing: content-box;
content: "";
border: 1px solid #fff;
border-left: 0;
border-top: 0;
height: 7px;
left: 4px;
position: absolute;
top: 1px;
transform: rotate(45deg) scaleY(0);
width: 3px;
transition: transform .15s ease-in .05s;
transform-origin: center;

}

.el-select-dropdown.is-multiple .el-select-dropdown__item .check{

display: inline-block;
position: relative;
top:2px;
border: 1px solid #dcdfe6;
border-radius: 2px;
box-sizing: border-box;
width: 14px;
height: 14px;
background-color: #fff;
z-index: 1;
transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);

}
</style>

Answer 2

还有一种更简单的方法
el-checkbox外面再套一层<div style="display:inline-block" @click="clickCheckbox"><el-checkbox v-model="item.isCheck"></el-checkbox></div>

// checkbox click事件
clickCheckbox(e) {
   e.preventDefault()
}

产生两次select change事件的原因是el-checkbox组件也会向上层emit一次。

Answer 3

给checkbox 添加 pointer-events: none;把checkbox完全当做显示来用
通过 select 的 change 事件来 控制 checkbox 的选中与非选中即可

Answer 4

啊，手机回复的，没有实例写，也没办法对着对照着问题回复，sf 的 app 做的真不好使呀。

1. select 事件的参数 val 看起来应该就是你所需要的的 weekCheckList 吧，不需要写 change 直接绑定应该就可以
2. checkbox 很明显是并不适合用双向绑定，所以并不建议这么写，推荐使用 :checked 内部使用一个判断，判断 weekCheckList 是否包含当时循环元素来控制选中与否
3. checkbox 的 change 事件是根据选中与否控制 weekCheckList 数组即可