[JavaScript知识库]demo1【elementui+vue】

一、功能点：

1.el-input框/el-select单选框/多选框对于el-table的查询

【实现思路：使用filter方法结合includes、indexOf != -1进行筛选】

检查数组是否包含一个基本类型的值

Array.includes() 方法 返回值是true/false

Arrya.indexOf() 方法 返回值是index值

检查对象数组是否包含对象

some() 方法

过滤方法：

filter()

filter是一个数组过滤器，参数接收一个函数，数组的每一项经过函数过滤，返回一个符合过滤条件的新数组

函数接收三个参数：

• item （当前遍历的数组项）
• index（当前项索引）
• arr （调用filter数组本身）

filter（）会创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 ；

filter（）不会改变原始数组；return后面判断结果，取布尔值，true的话就添入新的filter数组中，false的话，不会添进filter的数组中。

（需要注意的是：0 | -0 / null / undefined / ’ ’ / NaN 返回false其余都为true，-1/-2负数都为true）
?

 querybtn() {
      this.filTableData = this.tableData.filter(td1 => {
        let a = true
        let b = true
        let c = false
        if (this.keyword != '') {
          console.log('名称查询')
          a = td1.partname.includes(this.keyword)
        }
        if (this.value3 != '全部') {
          console.log('状态查询')
          b = td1.partstatus.includes(this.value3)
        }
        if (this.value5.length != 0) {
          console.log('预警类型查询')
          for (var val5 of this.value5) {
            console.log(val5)
            c = c || td1.warntype.includes(val5)
          }
          // console.log('-----------', val5)
        } else {
          c = true
        }
        return a && b && c
      })
    },

2.点击切换el-table

实现思路：

利用v-show进行条件渲染

<h3 class="partpeople" @click="showdetail(0, $event)" :class="{ newStyle: 0 === number }"
>区域人员</h3>
<h3 class="partcar" @click="showdetail(1, $event)" :class="{ newStyle: 1 === number }"
>区域车辆</h3>
<el-table class="partpeople" v-show="0 === number"></el-table>

3.对table进行分页

<el-table 
:data="filTableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)">
</el-table>