关于segmentfault:elementui中elinput回车搜索例子

问题形容

上一篇文章中讲述了含糊查问关联搜寻，不过含糊查问关联搜寻一般来说都是用户输出某个关键字当前，关联相干的数据出现，并供用户抉择一条（当然el-select中也自带多选性能，见下图，不过有些场景不太实用），用户抉择了某一条当前，展现这一条数据展现给用户看；然而有些状况就是用户想间接看到所有关联的数据都间接出现在页面上。比方用户输出了“王”这个字当前，要间接所有的与“王”字有关联的数据都在页面铺开来供用户抉择，这个时候，应用如下办法思路会更加实用一些：通过给el-input绑定enter回车事件，用户在input框输出内容当前，间接敲下回车键，就发申请获取后盾所有的关联的数据，而后渲染出现在页面上，用户想看谁就点击谁。当用户把input框的内容全副删除完当前，当input内容为空的时候，在发申请回到初始的数据状态。

el-select多选性能效果图

el-input绑定回车代码

html局部

<template>
  <div id="app">
    <!-- 应用vue自带的绑定回车事件
    应用trim润饰，不让用户乱输出空格 -->
    <el-input 
      v-model.trim="searchData"
      @keyup.enter.native="search"
    ></el-input>
  </div>
</template>

js局部

<script>
export default {
  name: "app",
  data() {
    return {
      searchData: "",
    };
  },
  watch:{
    // 监听input输入框，若没货色了，就回复默认状态
    searchData:function(newnew,oldold){
      if(newnew == ""){
        // 发申请回到初始列表数据状态
        console.log("搜寻框没货色了，回复初始状态");
      }
    }
  },
  methods: {
    search(){
      // 管制一下，如果用户没输出货色就不去搜寻
      if(this.searchData == ""){
        return
      }else{
        // 把searchData带着，发申请获取有关联的数据并出现在页面中
        console.log("带着关键字交给后端搜寻",this.searchData);
      }
    }
  },
};
</script>

总结

其实写代码最重要的就是思路，只有有思路了，就相当于有方向了，基本上都能够解决问题的。上述代码次要说的是思路，实现需求灵便变通一下即可。