iT邦幫忙

0

Element UI-[Table] 篩選資料

  • 分享至 

  • xImage
  •  

遇到問題


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


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
marlin12
iT邦研究生 5 級 ‧ 2019-03-14 21:59:11

你試過在nuxt或者vue-cli3上用element-ui嗎?
有碰到問題嗎?

LucyLiou iT邦新手 5 級 ‧ 2019-03-15 09:41:08 檢舉

您好:
- 我有在 Vue-cli3 使用過沒有什麼太大的問題除了要注意 data.name 不要是空的就好;我在這個地方一直出現 TypeError: Cannot read property ‘toLowerCase’ of undefined 這樣的錯誤,還有在HTML input 外層的 div 加上一個 slot 插槽,這兩個是我遇到的問題。
- Nuxt 的話我最近才開始要進入,還沒在裡面導入 element ui

marlin12 iT邦研究生 5 級 ‧ 2019-03-15 19:27:39 檢舉

謝謝你的回覆!你給我多點信心去試用element-ui。

我是在用vuetify的,但是覺得它的[零件]不易修改,想試用另一套框架。
在現今流行的框架裏,bootstrap-vue的[流行性]和[完整性]是無容置疑,[說明文件]也應該是最好的,但是我擔心它沿用古舊的內核。
至於Quasar,我看到它的[說明文件],已經不想用了。
剩下來,最流行的算是element-ui了。雖然它的[零件]有些比較奇怪的操作,但是沒有像vuetify封裝那麽隐密,應該比較容易修改,對嗎?
至於它們的[說明文件]方面,vuetify和element-ui真是[各有千秋],讀者都需要有很好的[想像力],才能猜得到、看得懂。

LucyLiou iT邦新手 5 級 ‧ 2019-03-16 09:53:09 檢舉

不會呦~希望可以給讓你有一點前進的動力。
我在 element-ui 也捉摸了一陣子,才有點了解怎麼去修改成自己想要的樣式,其中用了蠻多 CSS 來去強制把它修改成我要的樣子。
其實因為有了些方便的東西讓開發速度快了很多,但是有時候會因為太依靠套件本身,而把問題想得太複雜。
我也還在學要怎麼把 element-ui 的零件做一個運用XD

我要留言

立即登入留言