el-select范围选择框-Toy模板网

这篇具有很好参考价值的文章主要介绍了el-select范围选择框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1、html

<el-select
v-model="searchForm.hour"
:class="searchForm.hour?.length>1?'edit-tag-hour':'keep-tag-hour'"
filterable
multiple
clearable
:multiple-limit="2"
@remove-tag="removeChange"
@change="hourChange"
>
<el-option v-for="item in hourList" :key="item.value" class="ad-hour-bg" :label="item.label" :value="item.value" @mouseover.native="handleMouseOver(index)" />
</el-select>

2、js

    handleMouseOver(index) {
      if (this.searchForm.hour?.length === 1) {
        const arrIndex = [this.searchForm.hour[0], index].sort((x, y) => x - y)
        const elements = document.querySelectorAll('.ad-hour-bg')
        elements.forEach((element, index) => {
          if (index > arrIndex[0] && index < arrIndex[1]) {
            element.style.backgroundColor = '#F2F6FC'
            element.style.color = '#C0C4CC'
          } else if (index === arrIndex[1]) {
            element.style.backgroundColor = '#1177ff'
            element.style.color = '#FFF'
          } else if (index !== arrIndex[0]) {
            element.style.backgroundColor = ''
            element.style.color = '#606266'
          }
        })
      }
    },   
 removeChange(value) {
      if (this.searchForm.hour?.length > 0) {
        const elements = document.querySelectorAll('.ad-hour-bg')
        elements.forEach((element, index) => {
          if (index === this.searchForm.hour[0]) {
            element.style.backgroundColor = '#FFF'
            element.style.color = '#606266'
          }
        })
        this.searchForm.hour = null
      }
    },
    hourChange(value) {
      const elements = document.querySelectorAll('.ad-hour-bg')
      if (value?.length > 1) {
        value.sort((x, y) => x - y)
        this.$nextTick(() => {
          const parentElement = document.querySelector('.edit-tag-hour')
          if (parentElement) {
            const bbElements = parentElement.querySelectorAll('.el-select__tags-text')
            if (bbElements.length > 0) {
              const firstBbElement = bbElements[0]
              firstBbElement.textContent = `${firstBbElement.textContent} - `
            }
          }
        })
        elements.forEach((element, index) => {
          if (index > value[0] && index < value[1]) {
            element.style.backgroundColor = '#F2F6FC'
          } else if (index === value[0] || index === value[1]) {
            element.style.backgroundColor = '#1177ff'
            element.style.color = '#FFF'
          } else {
            element.style.color = '#C0C4CC'
          }
        })
      } else {
        elements.forEach((element, index) => {
          if (index === value[0]) {
            element.style.backgroundColor = '#1177ff'
            element.style.color = '#FFF'
          } else {
            element.style.backgroundColor = ''
            element.style.color = '#606266'
          }
        })
        this.$nextTick(() => {
          const parentElement = document.querySelector('.keep-tag-hour')
          if (parentElement) {
            const bbElements = parentElement.querySelectorAll('.el-select__tags-text')
            const firstBbElement = bbElements[0]
            firstBbElement.textContent = firstBbElement.textContent.replace('-', '')
          }
        })
      }
    },

3、 css

  .edit-tag-hour {
    .el-tag:nth-child(1) {
      border-right: 0;
      border-radius: 4px 0 0 4px;
      padding-right: 0;
      .el-tag__close {
        display: none;
      }
    }
    .el-tag:nth-child(2) {
      margin-left: 0;
      border-left: 0;
      border-radius: 0 4px 4px 0;
    }
  }