项目实战（附源码），使用Element实现输入下拉搜索功能，以及增加删除保存全套

一： 前言

      1. 源码

        在项目的实际开发中，根据用户的要求会遇到各种各样的需求。本功能就是在开发中所遇到的一个实际需求（这里有做简化，原需求会更麻烦一些）。于是本着学习与分享的思想，在这里对所写的代码进行分享。此代码是可以直接拿来用的，有需要源码的小伙伴可以从gitee获取，地址如下：

vue2全家桶练习: 包含vue2下使用router路由跳转，vuex状态管理，inject注入，minixs混入，watch监听https://gitee.com/qianchen12138/vue2-family-bucket-practice

      2. 功能介绍

        本次功能的实现，是基于Element组件所开发实现的。在一个表格里，首先数据可以切换编辑与浏览视图。在编辑视图下，可以新增与删除数据（第一条不可删），数据的列表是一个可通过输入数据进行检索的下拉列表，保存的时候会进行空值判断等。

二： 运行截图

不可编辑视图

输入检索

空值判断

保存成功

三： 功能实现

      1. HTML部分

         这里主要放了表格的实现，如下所示，注意在使用接口的时候，@clear方法可以删掉。

      <el-table
        :data="reflect"
        style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="content" label="自我反思列表" align="center">
          <template slot-scope="{row}">
            <el-select style="width: 100%"
                       filterable
                       remote
                       reserve-keyword
                       :remote-method="getReflectList"
                       :loading="selectReflect"
                       :disabled="isDetail"
                       clearable
                       @clear='getReflectList'
                       v-model="row.content"
                       placeholder="请输入并选择自我反思列表">
              <el-option v-for="(item,index) in reflectList" :key="index" :label="item.reflectContent" :value="item.id"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" v-if="!isDetail">
          <template slot-scope="scope">
            <el-button  size="mini" :disabled="scope.$index === 0" @click="deleteReflect(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      2. JS主要功能代码

        这里是放了输入检索的方法，其实这个方法里应该放一个接口，直接调用接口查询就好了，因为没时间写接口，这里改用假数据，当需要使用接口的时候，这个方法内部除了修改selectReflect状态的两行代码，其余的全部都可以删掉。

      getReflectList(searchKey){
        this.selectReflect = true
        this.reflectList =[]
        let tableDate = []
        tableDate=[
            {id: 1, reflectContent: "首先跟大家说一声对不起"},
            {id: 2, reflectContent: "诚恳的跟大家道歉"},
            {id: 3, reflectContent: "我真的很自责，很讨厌自己"},
            {id: 4, reflectContent: "被大家宠爱，变得如此自负"},
            {id: 5, reflectContent: "我深刻的意识到了自己的不足"},
            {id: 6, reflectContent: "接受大家对我的批评"},
            {id: 7, reflectContent: "我是为了给大家带来快乐"},
            {id: 8, reflectContent: "真的意识到自己错的很离谱"},
            {id: 9, reflectContent: "不断地带给你们麻烦和伤害"},
            {id: 10, reflectContent: "谢谢你们一直支持我"},
            {id: 11, reflectContent: "诚挚的跟你们道歉"},
            {id: 12, reflectContent: "紧跟潮流，from 某道歉书"},
          ]
        tableDate.forEach(item=>{
          //判断包含输入的字符串,以下两种都可以实现
          if(item.reflectContent.indexOf(searchKey) != -1)this.reflectList.push(item)
          // if(item.reflectContent.search(searchKey) != -1)this.reflectList.push(item)
        })
        setTimeout(res=>{
          if(this.reflectList.length==0&&searchKey==null)this.reflectList = tableDate 
          this.selectReflect=false
        },1000)
        
      },

      3. 完整代码 

        这里放上完整代码，引入element组件就可以直接运行使用了

<template>
  <div>
    <el-button type="primary" size="small" @click="isDetail = !isDetail">切换写入状态</el-button>
    <div class="tab" style="margin-top: 20px; width: 600px;">
      <el-button :disabled="isDetail" type="primary" @click="addReflect">新增</el-button>
      <span style="color: grey;margin-left: 20px;font-size: 12px">注：请分条列举你的自我反思，点击新增按钮，可新增反思条数</span>
      <el-table
        :data="reflect"
        style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="content" label="自我反思列表" align="center">
          <template slot-scope="{row}">
            <el-select style="width: 100%"
                       filterable
                       remote
                       reserve-keyword
                       :remote-method="getReflectList"
                       :loading="selectReflect"
                       :disabled="isDetail"
                       clearable
                       @clear='getReflectList'
                       v-model="row.content"
                       placeholder="请输入并选择自我反思列表">
              <el-option v-for="(item,index) in reflectList" :key="index" :label="item.reflectContent" :value="item.id"></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" v-if="!isDetail">
          <template slot-scope="scope">
            <el-button  size="mini" :disabled="scope.$index === 0" @click="deleteReflect(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" :loading="saveLoading" @click="onSubmit">保存</el-button>
    </div>
  </div>
</template>

<script>
  export default{
    data(){
      return{
        selectReflect:false,
        saveLoading:false,
        isDetail:true,
        reflect:[{
          "content": "",
          }
        ],
      reflectList:[],
      }
    },
    created() {
      this.getReflectList()
    },
    methods:{
      //其实这个方法里应该放一个接口，直接调用接口查询就好了，因为没时间写接口，这里改用假数据
      //除了修改selectReflect状态，其余的代码都可以删掉换成接口，需要使用的时候自行修改
      getReflectList(searchKey){
        this.selectReflect = true
        this.reflectList =[]
        let tableDate = []
        tableDate=[
            {id: 1, reflectContent: "首先跟大家说一声对不起"},
            {id: 2, reflectContent: "诚恳的跟大家道歉"},
            {id: 3, reflectContent: "我真的很自责，很讨厌自己"},
            {id: 4, reflectContent: "被大家宠爱，变得如此自负"},
            {id: 5, reflectContent: "我深刻的意识到了自己的不足"},
            {id: 6, reflectContent: "接受大家对我的批评"},
            {id: 7, reflectContent: "我是为了给大家带来快乐"},
            {id: 8, reflectContent: "真的意识到自己错的很离谱"},
            {id: 9, reflectContent: "不断地带给你们麻烦和伤害"},
            {id: 10, reflectContent: "谢谢你们一直支持我"},
            {id: 11, reflectContent: "诚挚的跟你们道歉"},
            {id: 12, reflectContent: "紧跟潮流，from 某道歉书"},
          ]
        tableDate.forEach(item=>{
          //判断包含输入的字符串,以下两种都可以实现
          if(item.reflectContent.indexOf(searchKey) != -1)this.reflectList.push(item)
          // if(item.reflectContent.search(searchKey) != -1)this.reflectList.push(item)
        })
        setTimeout(res=>{
          if(this.reflectList.length==0&&searchKey==null)this.reflectList = tableDate 
          this.selectReflect=false
        },1000)
        
      },
      /**
       * @param {Object} index
       * 删除反思列表
       */
      deleteReflect(index){
        this.reflect.splice(index,1)
      },
      /**
       * 添加反思列表
       */
      addReflect(){
        this.reflect.push({
          "content": "",
        })
        this.getReflectList()
      },
      onSubmit() {
        this.saveLoading=true
        for (const item of this.reflect) {
          if (!item.content) {
            this.$message.warning("请输入自我反思")
            setTimeout(()=>{
              this.saveLoading=false
            },500)
            return
          }
        }
        setTimeout(()=>{
          this.$message.success("保存成功")
          this.saveLoading=false
        },1000)
      }
    }
  }
</script>

 四： 总结

        通过本次实践，是不是发现其实这个功能并没有想象的那么复杂？其实归根到底就是一些简单的逻辑判断，希望各位小伙伴通过这篇文章能够有所收获，欢迎大家讨论交流哦！最后再附一次gitee源码地址：

vue2全家桶练习: 包含vue2下使用router路由跳转，vuex状态管理，inject注入，minixs混入，watch监听https://gitee.com/qianchen12138/vue2-family-bucket-practice