可排序表格 (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
:rows="table_data"
:columns="table_header"
:filter-key="searchQuery"
:selected="selected_rows"
@update-table-data="https://www.cnblogs.com/yukiwu/p/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 = https://www.cnblogs.com/yukiwu/p/new_table_data;
},
onUpdateTableSelected:function(new_table_selected){
this.table_selected = new_table_selected;
},
},
源代碼
Github
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/265615.html
標籤：JavaScript
上一篇：陣列的常用方法之split