插件名称 | vue-data-table |
---|---|
版本号 | v3.0.0 |
发布时间 | 2020年9月6日 |
插件作者 | AndreSouzaAbreu |
一个数据表组件,增加了排序,筛选,分页和数据导出功能,以您的HTML表格。
# NPM
$ npm i @andresouzaabreu/vue-data-table --save
1.导入并注册数据表组件。
import DataTable from '@andresouzaabreu/vue-data-table'
import '@andresouzaabreu/vue-data-table/dist/DataTable.css'
Vue.component("data-table", DataTable);
2.在您的应用程序中创建一个基本数据表。
<data-table v-bind="parametersTable" @actionTriggered="handleAction" />
export default {
name: "App",
computed: {
parametersTable() {
return {
data: tabularData,
actionMode: "multiple",
columnKeys: [
"name",
"email",
"gender",
"country",
"job",
"city",
"created_at"
]
};
},
},
methods: {
handleAction(actionName, data) {
console.log(actionName, data);
window.alert("检查控制台以查看日志");
}
}
};
3.默认 props 。
actions: {
type: Array,
default: () => ["view", "edit", "delete"],
},
actionComponents: {
type: Object,
required: false,
default: () => ({
view: ButtonView,
edit: ButtonEdit,
delete: ButtonDelete,
})
},
actionMode: {
type: String,
default: "disabled",
validator: value => ["disabled", "multiple", "single"].includes(value)
},
allowedExports: {
type: Array,
default: () => ["xls", "csv", "json", "txt"],
validator: exports => exports.every(type => ["xls", "csv", "json", "txt"].includes(type)),
},
columns: {
type: Array,
required: false,
},
columnKeys: {
type: Array,
required: false,
},
data: {
type: Array,
required: true,
},
defaultColumn: {
type: Object,
required: false,
default: () => ({
sortable: true,
searchable: true,
})
},
defaultPerPage: {
type: Number,
default: 10,
},
perPageSizes: {
type: Array,
default: () => [10, 25, 50, 100],
},
lang: {
type: String,
default: "en",
},
showEntriesInfo: {
type: Boolean,
default: true,
},
showPerPage: {
type: Boolean,
default: true,
},
showDownloadButton: {
type: Boolean,
default: true,
},
showPagination: {
type: Boolean,
default: true,
},
showSearchFilter: {
type: Boolean,
default: true,
},
sortingMode: {
type: String,
default: "multiple",
validator: (value) => ["multiple", "single", "disabled"].includes(value),
},
sortingIndexComponent: {
type: Object,
default: () => DataTableSortingIndex,
},
sortingIconComponent: {
type: Object,
default: () => DataTableSortingIcon,
},
tableClass: {
type: String,
default: "table table-striped table-hover",
},
text: {
type: Object,
required: false,
},
unsafeHTML: {
type: Boolean,
default: false
}
v3.0.0(01/19/2021)
v2.2.3(01/18/2021)