Vue 中既可以输入也可以下拉选择(改进版)

项目场景：

项目场景：由于前些天，弄了一个下拉选择，也可以输入的，input输入框，但我感觉效果并不是很优美，所以今天对以前的代码，改进并进行优化。达到一个完美的效果。代码CV就可以用前提是你得将数据参数改为你的。

---

问题描述

昨天的代码，参照网络上写的，但是我感觉有些许问题。

#  例如 :disabled="IsDisabled"虽然报错不影响效果，到就是别捏。
Property or method “xxxx“ is not defined on the instance but referenced during render. Vue报错

解决方案：

1：表单功能解决

在表单中使用 <el -select> 标签

<el-form-item label="xxx方法:" prop="xxxName" label-width="160px">
  <el-select v-model="form.xxxName" filterable clearable placeholder="请选择xxx名称"
			 popper-class="customerPopper">
	<el-option v-for="(item, index) in xxxList" :key="index" :label="item.xxxName"
			   :value="item.xxxName" />
  </el-select>
</el-form-item>

方法中：

XXXtment() {
      getxxxInfo().then(data => {
        if (data.code === 200) {
          this.xxxList = data.data
        } else {
          this.$message.error(data.msg);
        }
      })
    },

只要在页面一加载就执行该方法，数据装入xxxlist中。

2：表单样式

虽然上诉功能是已经实现了，但样式缺不尽人意对于强迫症的我，是难以接受的。

例如：这样的参差不齐，肯定验收不了！那就改

使用div标签把整个表单包住

<div :class="['top', device == 'mobile' ? 'phoneApp' : '']">
<div>

 

在 <el-form>里引入自定义样式

<el-form :inline="true" ref="form" :model="form" :rules="rules" class="demo-form-inline Data_select ">

样式如下：

.top {
  width: 620px;
  height: 100%;
  margin: 30px auto;
  border-radius: 10px;
  /*上 右 下 左*/
  padding: 30px 0 15px 0;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  text-align: left;

  .Data_select {
    ::v-deep .el-input__inner {
      width: 420px;
    }

    ::v-deep .block .el-input__inner {
      width: 210px;
    }

    ::v-deep .block div {
      width: 210px;
      float: left;
    }

    .u-icon {
      margin-left: 160px;
      color: #666;
      z-index: 9999;
    }

  }

  .U_btn {
    display: flex;
    justify-content: center;

    .u_preser {
      margin-right: 10px;
    }
  }

}

问题解释： device ：是判断手机端还是pc端的，你看你需求加与不加

# 定义
computed: {
    ...mapState({
      device: state => state.app.device,
    }),
  },

# 方法
methods: {
    openCustomerDialog(e) {
      this.customerDialog = true
    },
}

总结：

有问题，欢迎留言咨询！