vue-elment中添加表格搜索按钮的实现

1.添加搜索输入框

<span>驾驶证姓名</span>
      <el-input v-model="input" placeholder="请输入驾驶员名字" 
      style="width: 170px" 
      clearable />   <!-- clearable  编辑功能-->

2.搜索键,添加点击事件 search

 <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>

3.搜索的东西，这里以姓名去搜索，下面是表格中姓名那栏的表头

<el-table-column prop="name" label="姓名" width="80" align="center" />

下面是整个表的<el-table>标签

<el-table ref="table" 
	:data="list" 
	border     
	style="width: 99%" 
	height="100%" 
	stripe="true" 
	:row-style="tableRowStyle" 
	:header-cell-style="tableHeaderColor">

border的用处是给表格添加边框
data该表所存放的数据数组 这里放的是list
height用来添加 固定表头 可以出现向下拉的滚动条
剩下属性没啥用 添加的是改变表格样式的

4.data{}定义的属性

 data() {
    return {
      index: 0,  //用来计数默认值为零
      list: [],  //原有有数据的数组
      data: []  //中转数组
      }
      }

5. methods 中 search方法实现

 search() {
      this.currentPage = 1
      this.getList()
    },
    // 处理数据，将原来数据分页
    getList() {
      // es6过滤得到满足搜索条件的展示数据list
      var list = this.data.filter((item, index) => item.date1.includes(this.value))
      list = list.filter((item, index) => item.name.includes(this.input))
      // 过滤分页
      this.list = list.filter((item, index) => index < this.currentPage * this.pageSize && index >= this.pageSize * (this.currentPage - 1))
      // 总数据条数
      this.total = list.length
    },

6. created里面

// 启动之后就调用 
// 将原有数组list里数据放进中间数组data里面
  created() {
    // 发请求拿到数据并暂存全部数据,方便之后操作 ,把上述所有数据给data数组
      this.data = listJson.list
      this.getList()
  },

7.最终实现效果

最后感谢各位大佬施舍我知识，借鉴文章，我恬不知耻的抄到我自己博客，抄到手就是我自己的！