el-input不用调用接口查询表单数据

之前写项目一直都会在input调用后台接口再进行查询，下面这个方法就不用，只需要在input表单输入内容，会根据输入的内容自动搜索表单数据

1. 首先写个el-input

 <el-input
        :placeholder="查询表单数据"
        class="search_input"
        v-model="search"
      >
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
//data值
search:''

2. 获取表单所有数据tableData，在这里我就不演示了，每个人的表单数据都不一样，直接获取后台接口表单数据就可以了

el-table绑定获取到的表单数据源,这里的意思如下

1-获取到所有表单数据之后根据搜索条件进行的一个筛选，filter：筛选，并且返回的是数组，search和input的双向绑定属性值对应

2-条件有：输入的值非空，我这里可以根据tableData的name属性和module属性进行搜索。toLowerCase()：把字符串的数字全部转换为小写。这样在输入框中无论是大小写都无所谓，都能搜索到

data.name.toLowerCase().includes(search.toLowerCase())：tableData的name属性转换为小写后看是否包含了输入框转为小写后的值，包含则返回

@selection-change：复选框单选

@select-all：全选复选框

 <el-table
        :data="tableData.filter((data) =>!search ||
              data.name.toLowerCase().includes(search.toLowerCase()) ||
              data.module.toLowerCase().includes(search.toLowerCase())
          )"
        style="width: 100%"
        :height="height"
        @selection-change="handleselect"
        @select-all="changeall"
      >
        <el-table-column type="selection" width="55" prop="name"></el-table-column>
 <el-table-column type="selection" width="55" prop="module"></el-table-column>
</el-table>
//data数据
tableData:[]

全选复选框和单选复选框，都是需要传给后端一个数组，数组包含每行的ID，语法如下

changeall (selection) {
      this.delarr = []
var arr=[]
      arr = selection
      const length = arr.length
      for (let i = 0; i < length; i++) {
        this.delarr.push(arr[i].id)
      }
    },

得到[1,2,3,4]

文章到此结束，希望对你有所帮助~