遇到問題

想要透過 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官網
回上一頁
回下一頁
下載範例程式