element-plus el-table 输入框实时筛选

element-plus el-table 输入框实现实时筛选

实现效果：

可以随意输入 数字 大小写字母 或文字 输入框实时的去匹配

1. 给el-input绑定值

<el-input v-model="inputValue"/>

2.渲染table表格

//这里简写 就是正常的el-table 表格 
  <el-table :data="tableData" >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
  </el-table>

3. 根据inputValue 对应tableData

<el-table :data="tableData.filter(data => !inputValue|| (data.date.includes(inputValue)) || data.name.toLowerCase().includes(inputValue.toLowerCase()))"
</el-table>
//我这里目的是既能搜日期 也能搜名字 所以 两个值中间要用|| 且两个值要用（）括住 不然就会发现只能满足第一个条件  第二个条件没有作用
//如果想要两个值都满足条件 就要写两个filter
//:data="tableData.filter(data => !inputValue || data.date.includes(inputValue)).filter(data => !inputValue || data.name.toLowerCase().includes(inputValue.toLowerCase()))"

//toLowerCase() 的目的是转化大小写  因为我的日期都是数字就不用转化了 后面的名字里有字母所以需要转化一下

4. 或者还可以用watch写 但没有直接写在table里好用

害 后端不给写接口 木有办法
ending~~