遇到问题

---

想要透过 Input 来筛选 Table 里面的资料

解决方法

---

Element UI 很方便直接使用 Vue 的 Scoped slot 来看看如何使用

---

在HTML地方需要先友 Input 这个把 search 做一个绑定

<div class="input-group" slot="header">                        <input  v-model="search" widht="" type="" class="ob-search-input ob-shadow search-input mr-3" id="" placeholder="请输入公告标题"></div>

Table 的标籤里面要帮我们的 tableData 加入 filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase())) data 是 tableData 中的所有资料，后面的 data.name.toLowerCase() 会把资料中的 name 全部变成小写之后会跟 search.toLowerCase() 去做比对

<el-table      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"    style="width: 100%">    <el-table-column      label="Date"      prop="date">    </el-table-column>    <el-table-column      label="Name"      prop="name">    </el-table-column>  </el-table>

需要新增两个变数一个是 search 输入的时候使用，另一个是 tableData 资料阵列

tableData: [    {      date: '2016-05-02',      name: '王小虎',      address: '上海市普陀区金沙江路 1518 弄'    }, {      date: '2016-05-04',      name: 'gdfsdf小虎',      address: '上海市普陀区金沙江路 1517 弄'    }, {      date: '2016-05-01',      name: 'fdsfd王小虎',      address: '上海市普陀区金沙江路 1519 弄'    }, {      date: '2016-05-03',      name: '王小虎',      address: '上海市普陀区金沙江路 1516 弄'    }],search: ''

参考资料

部落格
ElementUI官网
回上一页
回下一页
下载範例程式