Vue和Bootstrap的功能丰富的数据表组件– VueQuintable

Vue和Bootstrap的功能丰富的数据表组件– VueQuintable
插件名称 vue-quintable
版本号 v1.1.98
发布时间 2020年8月24日
插件作者 Quintetio

VueQuintable是使用Vue.js和Bootstrap框架构建的功能丰富的数据表解决方案。

变更日志:

v1.2.2(03/18/2021)

  • 更新了依赖关系

v1.2.0(03/16/2021)

  • 更新包

v1.1.98(02/23/2021)

  • 改进的Vue插槽支持

v1.1.97(01/13/2021)

  • 固定排序

v1.1.95(08/27/2020)

  • 清洗选择

v1.1.94(08/25/2020)

  • 修复了使用selectAllRows选择时的错误

v1.1.7(2020年8月25日)

  • 次要错误修正分页

安装和下载:

# 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,
}