插件名称 | vue-quintable |
---|---|
版本号 | v1.2.6 |
发布时间 | 2020年8月24日 |
插件作者 | Quintetio |
VueQuintable是使用Vue.js和Bootstrap框架构建的功能丰富的数据表解决方案。
# Yarn
$ yarn add @quintet/vue-quintable
# NPM
$ npm i @quintet/vue-quintable --save
1.导入VueQuintable和Bootstrap。
import Vue from 'vue'
// Bootstrap
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
// Bootstrap css
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
// vue-quintable
import "@quintet/vue-quintable/dist/vue-quintable.css"
import VueTable from '@quintet/vue-quintable'
Vue.use(VueTable);
2.将VueQuintable添加到模板。
<template>
<VueQuintable :config="config" :rows="rows"></VueQuintable>
</template>
data() {
return {
config: {
columns: [
{
headline: "Name",
}, {
headline: "Age",
}, {
headline: "Birth Place",
breakpoint: "md"
}, {
headline: "Job",
sticky: true,
}
],
},
rows: [
[
{
text: "Mia Wong"
},
{
text: 50
},
{
text: "Beijing"
},
{
text: "Trainee"
},
],
[
{
text: "Peter Stanbridge"
},
{
text: 18
},
{
text: "London"
},
{
text: "Trainee"
},
],
[
{
text: "Natalie Lee-Walsh"
},
{
text: 25
},
{
text: "Dublin"
},
{
text: "Trainee"
},
],
],
}
}
3.所有默认 props 。
rows: {
type: Array,
default () {
return [];
}
},
config: {
type: Object,
default () {
return {};
}
},
dynamicConfig: {
type: Boolean,
default: false,
},
value: {
type: Array,
default () {
return [];
}
},
preSelectedRows: {
type: Array,
default () {
return [];
}
},
loading: {
type: Boolean,
default: false,
},
filters: {
type: Object,
default () {
return {};
}
},
filterGroups: {
type: Array,
default () {
return [];
}
},
verbose: {
type: Boolean,
default: false,
},
nested: {
type: Boolean,
default: false,
},
tableClasses: {
type: String,
default: "",
},
sortOrder: {
type: Array,
default () {
return [];
},
},
updated: {
type: [Boolean, Object, Date],
default: false,
},
axios: {
type: Function,
}
v1.2.6 (07/22/2021)
v1.2.5 (06/07/2021)
v1.2.4 (03/23/2021)
v1.2.2(03/18/2021)
v1.2.0(03/16/2021)
v1.1.98(02/23/2021)
v1.1.97(01/13/2021)
v1.1.95(08/27/2020)
v1.1.94(08/25/2020)
v1.1.7(2020年8月25日)