Vue.js 可排序表格 (Sortable & Searchable Table) 組件

可排序表格 (Sortable & Searchable Tables) 在網頁和表單設計中很是經常使用。用戶能夠經過點擊表頭對將表格以該列作順序或降序排列，也能夠利用 Search Box 對錶格內容進行篩選。這個組件曾被運用於 X-Ray Diffraction Analysis App 和 Extract Graph Data App 等等。

註冊組件

---

註冊 Sortable & Searchable Tables 組件和以前介紹註冊其餘組件的方法相似, 其實就是複製粘貼已封裝好的代碼到父級實例中。

<script type="text/x-template" id="sortable-table-template">
...
</script>

<script>
Vue.component('sortable_table', {
    template: '#sortable-table-template’,
…
});
</script>

調用組件

---

直接添加自定義標籤 <sortable_table></sortable_table> 調用組件。

<sortable_table class="row" 
                :rows="table_data"
                :columns="table_header" 
                :filter-key="searchQuery" 
                :selected="selected_rows" 
                @update-table-data="onUpdateTableData"
                @update-table-selected="onUpdateTableSelected">
</sortable_table>

傳遞數據

---

利用 v-bind 動態綁定數據，其中searhQuery 爲 search box 的默認內容，table_header 爲表格的表頭，table_data 爲表格的數據， select_rows 爲勾選的行號。另外 "onUpdateTableData:function" 和 "onUpdateTableSelected" 用於動態刷新表格的內容。

data: function(){
        return {       
            searchQuery: '',
            table_header: ['name', 'age', 'height', 'weight', 'color'],
            table_data: [
                {id: 1, name: 'Alice', age: 12, height: 155, weight: 45, color: '#ffffff'},
                {id: 2, name: 'Ben', age: 13, height: 170, weight: 60, color: '#cccccc'},
                {id: 3, name: 'Charlie', age: 17, height: 178, weight: 65, color: '#999999'},
                {id: 4, name: 'Daniel', age: 14, height: 168, weight: 58, color: '#666666'},
                {id: 5, name: 'Ethan', age: 11, height: 150, weight: 50, color: '#333333'},
            ],
            selected_rows: [],
        }
    },
...
 methods:{ 
        onUpdateTableData:function(new_table_data) {
            this.table_data = new_table_data;
        },
        onUpdateTableSelected:function(new_table_selected){
            this.table_selected = new_table_selected;
        },
    },

源代碼

---

Github