erp-el-element/CommonInput/Composite.vue

<template>
  <div>
    <el-input
      :placeholder="content"
      v-model="form.value"
      class="input-with-select"
      :size="size"
      @input="input"
      @keydown.enter.native="Enter"
    >
      <el-select
        v-model="form.select"
        slot="prepend"
        :placeholder="name"
        class="dateselect"
        :style="width"
        @change="input"
        @keydown.enter.native="Enter"
      >
        <template slot="prefix">
          {{ (data.find((e) => e.value == form.select) || {}).label }}
        </template>
        <el-option
          v-for="item in data"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-input>
  </div>
</template>

<script>
export default {
  name: "Composite",
  props: {
    size: {
      type: String,
      default: "small",
    },
    width: {
      type: Number,
      default: 50,
    },
    name: {
      type: String,
      default: "",
    },
    default: {
      default: null,
    },
    content: {
      type: String,
      default: "",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    enName: {
      type: String,
      default: "",
    },
  },
  components: {},
  data() {
    return {
      form: {
        value: "",
        select: this.default,
        enName: this.enName,
      },
    };
  },
  methods: {
    // 输入事件
    input() {
      this.$emit("CompositeVal", this.form);
    },
    //回车事件
    Enter() {
      // this.$emit("select", this.form);
    },
  },
};
</script>

<style scoped lang='scss'>
::v-deep .input-with-select .el-input-group__prepend {
  background-color: #fff;
  border: none !important;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
::v-deep .dateselect {
  color: #606266;
  text-align: start;
  .el-input__prefix {
    position: relative;
    left: 0;
    padding: 0 20px 0 18px;
    box-sizing: border-box;
    color: #606266;
    visibility: hidden;
  }

  .el-input__inner {
    padding: 0 0 0 15px;
    border-radius: 4px 0 0 4px;
    z-index: 1;
  }

  .el-input__suffix {
    display: flex;
    align-items: flex-start;
    z-index: 50;
    margin-top: 1px;
  }
  .el-input__inner {
    position: relative;
    left: 0;
    border: 1px solid #dcdfe6 !important;
  }
}
::v-deep .el-select {
  margin: 0 -21px !important;
  box-sizing: border-box;
}
::v-deep .el-input__inner:hover {
  position: relative;
  z-index: 99 !important;
  border: 1px solid #c0c4cc !important;
}
::v-deep .el-input__inner:focus {
  position: relative;
  z-index: 99 !important;
  border: 1px solid #1890ff !important;
}
</style>

<!-- 两个select下拉框联动 -->

<!-- <template>
  <div>
    <el-input
      placeholder="请输入内容"
      v-model="value"
      class="input-with-select"
      :size="size"
    >
      <el-select
        v-model="select"
        slot="prepend"
        placeholder="请选择"
        class="dateselect"
      >
        <template slot="prefix">
          {{ (PopUp.find((e) => e.enName == select) || {}).lable }}
        </template>
        <el-option
          v-for="item in PopUp"
          :key="item.enName"
          :label="item.lable"
          :value="item.enName"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="select"
        slot="prepend"
        placeholder="请选择"
        class="dateselect dateselect-two"
      >
        <template slot="prefix">
          {{ (PopUp.find((e) => e.enName == select) || {}).lable }}
        </template>
        <el-option
          v-for="item in PopUp"
          :key="item.enName"
          :label="item.lable"
          :value="item.enName"
        >
        </el-option>
      </el-select>
    </el-input>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: String,
      default: "small",
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    formLabelAlign: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      value: "",
      select: "",
    };
  },
  computed: {
    // 带弹出框
    PopUp() {
      if (!this.data) return;
      return this.data.filter((item) => item.isPopUp);
    },
  },
  methods: {},
};
</script>

<style scoped lang='scss'>
::v-deep .el-select .el-input {
  // flex: 1;
  width: 100px;
}

::v-deep .input-with-select .el-input-group__prepend {
  background-color: #fff;
  border: none !important;
  padding: 0;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
::v-deep .dateselect {
  //   min-width: 105px;
  color: #606266;
  text-align: start;
  .el-input__prefix {
    position: relative;
    left: 0;
    padding: 0 10px 0 30px;
    box-sizing: border-box;
    color: #606266;
    visibility: hidden;
  }

  .el-input__inner {
    padding: 0 0 0 15px;
    border-radius: 4px 0 0 4px;
    z-index: 1;
  }

  .el-input__suffix {
    display: flex;
    align-items: flex-start;
    z-index: 50;
    margin-top: 1px;
  }
  .el-input__inner {
    position: relative;
    margin-left: 2px;
    left: 0;
    border: 1px solid #dcdfe6 !important;
  }
}
::v-deep .el-select {
  margin: 0 0px !important;
  box-sizing: border-box;
}
::v-deep .el-input__inner:hover {
  position: relative;
  z-index: 50;
  border: 1px solid #c0c4cc !important;
}
::v-deep .el-input__inner:focus {
  position: relative;
  z-index: 55;
  border: 1px solid #1890ff !important;
}
::v-deep .dateselect-two {
  .el-input__inner {
    border-radius: 0px;
    margin-left: 1px;
  }
}
::v-deep .dateselect-two:hover {
  .el-input__inner {
    z-index: 999;
  }
}
</style> -->