2021-05-19

一、需求:项目 中需要在选中上级后,在编码列input前面显示对应的编码数

二、实现:

1.封装input组件,加上template slot="prepend"插槽,重点:@input=“input”,实现组件双向数据绑定,子组件传递当前输入的值,父组件通过v-model自动获取传入的input事件的value

<template>
  <div class="inline">
    <el-input
      :placeholder="placeholder"
      :value="value"
      :clearable="clearable"
      type="text"
      @input="input"
    >
      <template slot="prepend">
        <span>{{ label }}</span>
      </template>
    </el-input>
  </div>
</template>

<script>
export default {
  props: {
    placeholder: {
      type: String,
      default: ''
    },
    clearable: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    separate: {
      type: String,
      default: '.'
    }
  },
  data() {
    return {
      inputModel: ''
    }
  },
  mounted() {
  },
  methods: {
    input(event) {
      this.$emit('input', event)
    }

  }
}
</script>

<style scoped>
.inline {
  display: inline;
}
.el-input-group__prepend {
  padding: 0 14px !important;
}
</style>

2.组件中使用

代码如下（示例）：

import inputSlot from '@/components/InputPrepend/InputPrepend.vue'
components: {
    inputSlot
  },

<input-slot
            v-model="postForm.code"
            :label="postForm.pId.toString()"
            class="input-menu"
            :placeholder="'请输入编码'"
            :clearable="true"
          />

---