Element ui 自定义结合checkbox和select_element select checkbox

问题描述

Vue会议日期控件，Element checkbox和select结合：

解决方案：

分为html、js和css三个部分：

数据代码 html部分：

            <el-select
              popper-class="select-popper"
              :popper-append-to-body="false"
              multiple
              clearable
              v-model="ruleForm.specific_day"
              placeholder="请选择"
            >
              <el-option
                v-for="item in getSpecific_day"
                :label="item.label"
                :value="item.value"
                :key="item.value"
              >
                <el-checkbox v-model="item.check" @click.prevent.native>
                  {{ item.label }}
                </el-checkbox>
              </el-option>
            </el-select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

数据代码 js部分：
获取当月候选项,因为业务原因，我的天数是固定的，如果要动态就自己获取下

    getSpecific_day() {
      const arr = []
      for (let i = 1; i <= 31; i++) {
        const obj = { value: i, label: i, check: false }
        arr.push(obj)
      }
      arr.push({ value: 'last', label: '最后一天', check: false })
      return arr
    }
    watch:{
        // 监听用户切换checkbox是否选中
    'getSpecific_day'() {
      for (const item of this.getSpecific_day) {
        if (this.ruleForm.specific_day.includes(item.value)) {
          item.check = true
        } else {
          item.check = false
        }
      }
    },
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

数据代码 css部分：

<style lang='scss'>
.select-popper {
  .el-select-dropdown__list {
    display: flex;
    flex-wrap: wrap;
    width: 440px;
  }
  .el-select-dropdown__item.selected::after {
    display: none;
  }
  .el-checkbox {
    width: 30px;
  }
  .el-select-dropdown__item:last-child {
    .el-checkbox {
      width: auto;
    }
  }
}
// 取消select选中的√css样式
.el-select-dropdown.is-multiple .el-select-dropdown__item.selected::after {
  // display: none;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24