Vue Ele Table是一個基于Vue.js和Element UI實現的表格組件,可以快速創建具有排序、分頁、篩選、編輯、導出等功能的表格。
使用Vue Ele Table前,需先引入Vue.js和Element UI。然后,可以通過npm安裝Vue Ele Table:
npm install vue-ele-table --save
在Vue組件中使用Vue Ele Table:
<template> <div> <vue-ele-table :data="tableData" :columns="tableColumns" :pagination="true" :edit-mode="true" :export-excel="true" /> </div> </template> <script> import VueEleTable from 'vue-ele-table' export default { components: { VueEleTable }, data() { return { tableData: [ { id: '1', name: 'Jack', age: '20', address: 'New York' }, { id: '2', name: 'Amy', age: '25', address: 'Los Angeles' }, { id: '3', name: 'Tom', age: '30', address: 'Chicago' }, { id: '4', name: 'Maggie', age: '35', address: 'Houston' }, { id: '5', name: 'Harry', age: '40', address: 'San Francisco' } ], tableColumns: [ { label: 'ID', prop: 'id', width: 100 }, { label: 'Name', prop: 'name', width: 150, sortable: true, editable: true }, { label: 'Age', prop: 'age', width: 100, sortable: true, editable: true }, { label: 'Address', prop: 'address', width: 300, filterable: true } ] } } } </script>
以上代碼實現了一個帶有排序、篩選、編輯、導出功能的表格。通過data屬性綁定數據源,columns屬性綁定表格列信息,pagination屬性設置分頁,edit-mode屬性設置編輯模式,export-excel屬性設置導出Excel功能。
Vue Ele Table支持的功能有很多,比如分組表頭、自定義列、自定義樣式等。了解更多Vue Ele Table的使用方法和API,可以查看官方文檔。