【功能实现】el-input和el-select联动

znavdn

已于 2022-09-07 14:46:01 修改

阅读量3k

点赞数 4

文章标签： vue.js elementui javascript

于 2022-09-07 14:43:06 首次发布

本文链接：https://blog.youkuaiyun.com/znavdn/article/details/126745197

版权

本文介绍了一个Vue.js应用中，如何实现在选择下拉框（el-select）选项时，输入框（el-input）的placeholder和内容动态变化。通过v-model和@change事件监听，结合自定义filter和方法getDescByValue，实现了下拉选项与placeholder的同步，并在切换时清空输入框内容，避免多余参数传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：点击select下拉框选项，input框placeholder也跟着变化，切换时重置内容

代码结构

        <el-form-item>
          <el-input
            v-model="typeValue"
            size="small"
            :placeholder="typeSelect | getPlaceholder(platFormInfo)"
            style="width: 330px"
            suffix-icon="el-icon-search"
            clearable
            @input="typeInput"
            @keyup.enter.native="getList"
          >
            <el-select
              slot="prepend"
              v-model="typeSelect"
              placeholder="请选择"
              style="width: 112px"
              @change="selectChange"
            >
              <el-option
                v-for="item in platFormInfo"
                :key="item.value"
                :label="item.desc"
                :value="item.value"
              />
            </el-select>
          </el-input>
        </el-form-item>

export default {
  filters: {
    // 选中下拉框修改placeholder   
    getPlaceholder: function(value, data) {
      return getDescByValue(value, data)  //getDescByValue 为封装的获取对应枚举值的方法
    }
  },
  data() {
    return {
      platFormInfo: [ //下拉选项内容，desc：名称  code：后端返回字段 value:对应的数值
        { desc: '平台名称', code: 'name', value: '1' },
        { desc: '平台编码', code: 'code', value: '2' }
      ],
      typeSelect: '1', //默认显示value为1的名称
      typeValue: '',
      typeInputkey: '', // 避免向后端传递多余参数,切换和重置时，若有typeInputkey则去掉form中对应参数
 }
},
 methods: {
     typeInput(e) {
      this.typeInputkey = getDescByValue(
        this.typeSelect,
        this.platFormInfo,
        'value',
        'code'
      )
      this.form[this.typeInputkey] = e
    },
    // 选择时清空
    selectChange(e) {
      this.typeValue = ''
      // 避免向后端传递多余参数,切换和重置时，若有typeInputkey则去掉form中对应参数
      if (this.typeInputkey) {
        delete this.form[this.typeInputkey]
    }
  },
}

获取对应枚举值 getDescByValue 方法（封装后引入使用）：

export const getDescByValue = (inputValue, data, inputKey = 'value', outputKey = 'desc') => {
  let outputValue = ''
  if (data && data.length > 0) {
    for (let i = 0; i < data.length; i++) {
      const item = data[i]
      const itemValue = item[inputKey]
      if (inputValue + '' === itemValue + '') {
        outputValue = item[outputKey]
        break
      }
    }
  }
  return outputValue
}