Tmr-Multilingual/.svn/pristine/ae/aec43fd8f3e99de7a68a7be53023e63f62d08fc2.svn-base

<template>
  <div id="mySelect" :class="isAll?'isAll':''">
    <el-select
      v-model="searchSelect"
      multiple
      filterable
      placeholder="请选择"
      popper-class="cheng"
      @change="selectChange"
      @visible-change="vselectChange"
    >
      <el-option v-for="item in selectOption" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'MySelect',
  components: {},
  props: {
    option: { // 传输过来的数组
      type: Array,
      default: []
    },
    label: { // 做一个字典，显示的值
      type: String,
      default: 'label'
    },
    value: { // 做一个字典，实际的值
      type: String,
      default: 'value'
    }
  },
  data() {
    return {
      searchSelect: [], // 下拉选择框中的内容
      oldSearchSelect: [], // 原来的下拉框中的内容
      selectOption: [],
      isAll: true, // 是不是全选中了
      checkedIds: []
    }
  },
  computed: {},
  watch: {
    option() {
      console.log(this.option, '===this.option')
      if (this.option.length != 0 && this.value in this.option[0] && this.label in this.option[0]) {
        this.selectOption = []
        this.selectOption.push({
          value: 'all',
          label: '全部'
        })
        this.option.map(item => {
          this.selectOption.push({
            value: item[this.value],
            label: item[this.label]
          })
        })
        console.log(this.selectOption, '========123')
        this.selectOption.map(item => {
          this.searchSelect.push(item.value)
          this.oldSearchSelect.push(item.value)
        })
      }
    }
  },
  mounted() {
    // console.log(this.opeion);
  },
  methods: {

    // 下拉框选择
    selectChange() {
      // console.log(this.searchSelect);
      const oldIndexOfValue = this.oldSearchSelect.indexOf('all')
      const indexOfValue = this.searchSelect.indexOf('all')
      if (oldIndexOfValue != -1 && indexOfValue != -1) { // 两个都有ALL,则表示只是去掉了莫一项
        this.searchSelect.splice(indexOfValue, 1)
        this.isAll = false
        this.saveNewSearchSelect()
      } else if (oldIndexOfValue == -1 && indexOfValue != -1) { // 老数据没有all，新的有的，表明需要全选
        this.searchSelect.splice(0)
        this.oldSearchSelect.splice(0)
        this.isAll = true
        this.selectOption.map(item => {
          this.searchSelect.push(item.value)
          this.oldSearchSelect.push(item.value)
        })
      } else if (oldIndexOfValue != -1 && indexOfValue == -1) { // 老数据有all，但是新的数据没有all，表明需要全不选
        this.searchSelect.splice(0)
        this.oldSearchSelect.splice(0)
        this.isAll = false
      } else if (oldIndexOfValue == -1 && indexOfValue == -1) { // 两个都没有ALL,表示只是选择了一下，需要判断是不是都选上
        const isAllSelected = false
        const allOption = []
        this.selectOption.map(item => {
          if (item.value != 'all') {
            allOption.push(item.value)
          }
        })
        if (allOption.length == this.searchSelect.length) {
          this.isAll = true
          // this.searchSelect.push("all");
          this.searchSelect.splice(0, 0, 'all')
          this.saveNewSearchSelect()
        }
      }
    },
    // 保存原来的数据
    saveNewSearchSelect() {
      this.oldSearchSelect.splice(0)
      this.searchSelect.map(item => {
        this.oldSearchSelect.push(item)
      })
    },
    vselectChange() {
      console.log(this.searchSelect, '====777')
      this.$emit('searchSelect', this.searchSelect)
    }
  }
}
</script>
<style lang="scss">
  #mySelect{

    .el-select__tags{
      height: 26px;
      overflow: hidden;
      // text-overflow: ellipsis;
      &>span{
        white-space: nowrap;
        overflow: hidden;
        display: block;
      }
    }
    .el-select .el-select__tags>span{
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block!important;
      // width: 70%;
      max-width: 90%;
    }
    .el-tag.el-tag--info .el-tag__close{
      display: none;
    }
  }
    .isAll{
      .el-select .el-select__tags>span{
        span:nth-child(n+2){
          display: none;
        }
      }
    }

</style>