vue-elment中添加表格多条件搜索和分页以及重置

1.多条件查询输入框整两个

<div @keyup.enter="search">
      <span>所属单位</span>
      <el-select v-model="value" placeholder="----全部----" style="width: 170px">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          align="center"
        />
      </el-select>

      <span>驾驶证姓名</span>
      <el-input v-model="input" placeholder="请输入驾驶员名字" style="width: 170px" clearable />
      <span>时间</span>
      <el-date-picker v-model="value1" type="datetime" style="width: 200px" placeholder="选择日期时间" />

      <span>至</span>
      <el-date-picker v-model="value2" type="datetime" style="width: 200px" placeholder="选择日期时间" />

      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button type="primary" icon="el-icon-search" @click="fromline">重置</el-button>
    </div>&nbsp;

2.表格需要查询的的两个字段

<el-table-column prop="name" label="姓名" width="80" align="center" />
<el-table-column align="center" prop="date1" label="数据来源" width="180" />

3.表格的<el-table>下面设置分页标签

<el-pagination
        :current-page="currentPage"  //默认页数
        :page-sizes="[5,10]"    //当前页用户可以选择显示5 条或者10条数据
        :page-size="pageSize"   //页面的中每页条数
        layout="total, sizes, prev, pager, next, jumper"   //分页布局
        :total="total"  //数据总条数
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange"
 />

4. data{}属性的定义

<script>
var listJson = {
  list: [
    {
      name: '张三',
      site: '内蒙古呼和浩特市新城区站东路25号',
      gender: '男',
      phone: '1502486595',
      date1: '内蒙古搭顺车宜昌分公司',
      code: '9469469995530010',
      car: '小型轿车',
      date2: '2019-05-06',
      date3: '2020-06-07',
      created_at: '2018-05-06'
    },
    {
      name: '李四',
      site: '内蒙古呼和浩特市新城区站东路25号',
      gender: '男',
      phone: '1502486595',
      date1: '内蒙古搭顺车宜昌分公司',
      code: '9469469995530010',
      car: '小型轿车',
      date2: '2019-05-06',
      date3: '2020-06-07',
      created_at: '2018-05-06'
    }
    // 这里面就不写这么多了 数据多了分页才能看出效果，后序再添
  ]
}
export default {
  data() {
    return {
      index: 0, //计数
      list: [], //原存放数据数组
      data: [],  //中转数组
      pageSize: 10,  //每页10条
      total: null,   // 总共条数
      currentPage: 1, //打开表格页面，分页的默认页数
      value: '',   //表格置空
      input: '',  //表格置空
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },

          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      options: [
        {
          value: '',
          label: ' - - - - 全部 - - - -'
        },
        {
          value: '内蒙古搭顺车宜昌分公司',
          label: '内蒙古搭顺车宜昌分公司'
        },
        {
          value: '内蒙古搭顺车北京分公司',
          label: '内蒙古搭顺车北京分公司'
        },
        {
          value: '内蒙古搭顺车上海分公司',
          label: '内蒙古搭顺车上海分公司'
        }

      ],
      value1: '',
      value2: ''
    }
  },
  // watch有监听的作用 可以监听value值的变化
  // 那就调用getlis方法  在这里用于多条件查询  监听参数变化 变化了之后再次调用getlist方法
  watch: {
    value: function(value) {
      this.getList(value)
    }
  },
  // 启动之后就调用
  created() {
    this.pageList()
  },
  methods: {
    handleClick(row) {
      console.log(row)
    },
    // 重置按钮方法 输入框里的值置空
    fromline: function() {
      this.value1 = ''
      this.value2 = ''
      this.input = ''
      this.value = ''
    },
    // 将原有数组list里数据放进中间数组data里面
    pageList() {
      // 发请求拿到数据并暂存全部数据,方便之后操作 ,把上述所有数据给data数组
      this.data = listJson.list
      this.getList()
    },
    // 搜索过滤数据
    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
    },
    // 当每页数量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getList()
    },
    // 当当前页改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getList()
    },
    // 设置表格行的样式
    tableRowStyle({ row, rowIndex }) {
      return 'background-color:#E8CCFF;font-size:10px;'
    },
    // 设置表头行的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return 'background-color:#888888;color:#fff;font-size:12px;text-align:center ;height:70px'
    },
   
  }
}
</script>

最终显示效果

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