el-select全选功能的简单封装

·  阅读 265

3.gif

<template>
  <div class="allselect">
    <el-select
      v-model="bindValue"
      size="small"
      multiple
      collapse-tags
      filterable
      clearable
      :placeholder="placeholder"
    >
      <el-option style="padding: 0" value="all">
        <span class="option" @click.stop="setAll">{{ allFlag }}</span>
      </el-option>
      <el-option
        v-for="item in options"
        :key="valueCompute(item)"
        :label="labelCompute(item)"
        :value="valueCompute(item)"
      ></el-option>
    </el-select>
  </div>
</template>
<script>
  export default {
    props: {
      value: {
        type: Array,
        default: () => []
      },
      placeholder: {
        type: String,
        default: "请选择"
      },
      options: {
        type: Array,
        default: () => []
      },
      labelKey: {
        type: String,
        default: ""
      },
      valueKey: {
        type: String,
        default: ""
      },
      multipleLimit: {
        type: Number,
        default: 0
      }
    },
    computed: {
      valueCompute() {
        return (item) => {
          if (this.valueKey) {
            return item[this.valueKey]
          } else {
            return item
          }
        }
      },
      labelCompute() {
        return (item) => {
          if (this.labelKey) {
            return item[this.labelKey]
          } else {
            return item
          }
        }
      }
    },
    watch: {
      bindValue(val) {
        if (val.length === 0) {
          this.allFlag = "全选"
        }
        if (val.length === this.options.length) {
          this.allFlag = "全不选"
        }
        this.$emit("input", val)
      }
    },
    data() {
      return {
        bindValue: this.value,
        allFlag: "全选"
      }
    },
    methods: {
      setAll() {
        if (this.allFlag === "全选") {
          this.allFlag = "全不选"
          this.bindValue = this.valueKey
            ? this.options.map((item) => item[this.valueKey])
            : this.options
        } else {
          this.allFlag = "全选"
          this.bindValue = []
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .allselect {
    margin: 20px;
  }
  .option {
    user-select: none;
    display: inline-block;
    width: 100%;
    font-size: 14px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
    &:hover {
      background: #f5f7fa;
    }
  }
  ::v-deep .el-select__tags-text {
    display: inline-block;
    max-width: 75px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  ::v-deep .el-tag.el-tag--info .el-tag__close {
    top: -5px;
    right: -4px;
  }
  ::v-deep.el-select-dropdown__item {
    max-width: 305px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    &::after {
      right: 10px !important;
    }
  }
</style>


复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改