一个数据表组件，增加了排序，筛选，分页和数据导出功能，以您的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）

• 添加语言服务提供商

---

官网：https://github.com/AndreSouzaAbreu/vue-data-table

GitHub下载：https://github.com/AndreSouzaAbreu/vue-data-table/archive/master.zip