当前位置：首页 > article >正文

el-input输入框需要支持多输入，最后传输给后台的字段值以逗号分割

article 2025/1/4 4:10:16

需求：一个输入框字段需要支持多次输入，最后传输给后台的字段值以逗号分割
解决方案：结合了el-tag组件的动态编辑标签那块的代码

//子组件
<template>
  <div class="input-multiple-box" id='inputMultipleBox'>
    <div>
      <el-tag v-for="(tag, index) in inputTagList" :key="index" type="info" closable @close="handleClose(index)">
        {{ tag }}
      </el-tag>
    </div>
    <el-input
      v-model="inputValue"
      @keyup.enter="handleInputConfim"
      @blur="handleInputConfim"
      style="flex: 1; min-width: 100px"
      placeholder="按下enter键或者失去焦点进行添加"
    ></el-input>
  </div>
</template>
 
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'

const props = defineProps(["inputTags", "separator"]);
const emit = defineEmits(['update:inputTags'])

const inputTagList = ref([])
const inputValue = ref('')
const handleClose = (index: number) => {
  inputTagList.value.splice(index, 1)
  emit('update:inputTags', inputTagList.value.join(props.separator || ','))
}
const handleInputConfim = () => {
  if (inputValue.value) {
    inputTagList.value.push(inputValue.value)
    inputValue.value = ''
    emit('update:inputTags', inputTagList.value.join(props.separator || ','))
  }
}

watch(()=>props.inputTags, (val, pre) => {
  inputTagList.value = props.inputTags.split(props.separator || ',')
});

onMounted(() => {
  if (props.inputTags) {
    inputTagList.value = props.inputTags.split(props.separator || ',')
  }
})
</script>
 
<style lang="scss" scoped>
.input-multiple-box {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  // padding: 0 5px;
  display: flex;
  flex-wrap: wrap;
}
</style>
<style lang="scss">
#inputMultipleBox {
  .el-input__inner {
    border: none;
  }
}
</style>


//父组件
import multipleInput from '@/components/multipleInput/index.vue'
<multipleInput
   v-model:inputTags="form.modbus"
   placeholder="请输入"
   clearable
 >
 </multipleInput>