# @andresouzaabreu/vue-data-table 中文文档

规范地址：https://npmcn.com/package/%40andresouzaabreu/vue-data-table/

版本：3\.3\.4
npm 元数据更新时间：2024-03-16T13:27:30.204Z
中文译文更新时间：2026-11-08T07:52:48.426Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40andresouzaabreu/vue-data-table
原文对照：https://npmcn.com/package/%40andresouzaabreu/vue-data-table/?lang=original
项目主页：https://github.com/uwla/vue-data-table#readme
源码仓库：https://github.com/uwla/vue-data-table

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2 MB，47 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2020-03-10T19:21:18.946Z
- 最新版本发布：2024-03-16T13:27:29.758Z
- 近 30 天下载量：1860（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：33（近 12 个月 0 个）

## 中文简介

添加高级特性到 HTML 表格的 Vue 插件

## 安装

```sh
npm install @andresouzaabreu/vue-data-table
```

也可以使用：`pnpm add @andresouzaabreu/vue-data-table`、`yarn add @andresouzaabreu/vue-data-table`、`bun add @andresouzaabreu/vue-data-table`

## README

# VUE 数据表

VueDataTable是一个将高级特性添加到HTML表格的Vue插件. 它的灵感来自 [数据表 j 查询插件](https://datatables.net/)不过 使用 Vue 从头开始写.

## 目录

1.  [特征](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-features)
2.  [演示](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-demo)
3.  [开始](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-getting-started)
    -   [安装](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-installation)
    -   [设置](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-set-up)
    -   [使用](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-use)
4.  [配置](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-configuration)
    -   [列数](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-columns)
    -   [兰](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-lang)
    -   [自定义组件](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-custom-components)
5.  [许可证](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-license)
6.  [版本](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-versioning)
7.  [捐款](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-contributing)
8.  [作者数](https://npmcn.com/package/%40andresouzaabreu/vue-data-table/#readme-authors)

## 特征

-   多列排序
-   倾斜
-   搜索过滤器
-   导出数据( XLS、 JSON、 CVS 或 TXT)
-   自定义组件单元格
-   自定义文本

## 演示

查看和编辑一个软件包是否适合您需要的最好方式 演示项目。 这里有一些代码游乐场 你可以测试 VueDataTable. (原始内容存档于2018-09-29).

-   [Demo 1(审查)](https://ygnl5.csb.app/)
-   [Demo 1(审查和代码)](https://codesandbox.io/s/vue-data-table-demo01-ygnl5)
-   [Demo 2 (审查)](https://r94qe.csb.app/)
-   [Demo 2(审查和代码)](https://codesandbox.io/s/vue-data-table-demo02-r94qe)
-   [Demo 3(审查)](https://fg8ok.csb.app/)
-   [Demo 3(审查和代码)](https://codesandbox.io/s/vue-data-table-demo03-fg8ok)
-   [Demo 4(审查)](https://qyetb7.csb.app/)
-   [Demo 4(审查和代码)](https://codesandbox.io/s/vue-data-table-demo04-qyetb7)
-   [Demo 5(审查)](https://0jkyuj.csb.app/)
-   [Demo 5(审查和代码)](https://codesandbox.io/s/vue-data-table-demo05-0jkyuj)

Demo 1 和 Demo 2 都来自这个插件的更古老的版本, 但应该仍然有效 由于API没有太大变化,因此有了更新的版本. 3号是最新的 版本,并有一个自定义页脚组件的例子。 Demo 4 执行大众选举 使用自定义组件和复选框的行。 Demo 5 使用自定义加载组件 在数据被装入时向用户显示.

## 开始

### 安装

```shell
npm install --save @andresouzaabreu/vue-data-table
```

### 设置

```javascript
import DataTable from "@andresouzaabreu/vue-data-table";
Vue.component("data-table", DataTable);
```

别忘了加入样式表

```javascript
import "@andresouzaabreu/vue-data-table/dist/DataTable.css";
```

### 使用

```html
<template>
    <div>
        <data-table v-bind="bindings"/>
    </div>
</template>
<script>
export default {
    computed: {
        bindings() {
            return {
                columns: [/*the columns*/]
                data: [/*the data*/]
                /* other props...*/
            }
        }
    },
}
</script>
```

**说明** 注意 v- bind 将带走对象中的所有密钥值对( in 这个案子 `bindings`),并把它们作为道具传递到VueDataTable. 这么说吧, 这是一次通过多个道具的捷径 .

## 配置

仅 `data` 电子 `columns` 需要这样做。 其他道具是可选的.

| 道具 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 数据 | `Array` | \- 说吧 | 将数据显示在桌面上的对象矩阵 |
| 栏 | `Array` | \- 说吧 | 指定如何制取每个列的天体阵列。 可选,如果 `columnKeys` 已存在. |
| 列键 | `Array` | \- 说吧 | 匹配对象密钥的字符串组合 `data`。如果 `columns` 已经设定. |
| 朗语 | `String` | `en` | 默认语言 |
| 每页 | `Array` | \[10、25、50、100\] | 每页显示行数的选项 |
| 默认配置 | `Number` | 10个 | 默认条目数 。 如果未设定, 那么它将成为第一个值 `perPageSizes` |
| 正在丢失 | `Bool` | `false` | 表格数据是否在装入 。 表格行仅在该值设定为 `false`。 。 。 . |
| 装入组件 | `Object`, (中文(简体) ), `String` | \- 说吧 | VueJS 组件如果 `isLoading` 设置为 `true` |
| 显示 | `Bool` | `true` | 是否显示 `PerPage` 组件 |
| 显示企业信息 | `Bool` | `true` | 是否显示 EntriesInfo 组件 |
| 显示搜索过滤器 | `Bool` | `true` | 是否显示搜索过滤器组件 |
| 显示 | `Bool` | `true` | 是否显示 Pagination 组件 |
| 显示下载按钮 | `Bool` | `true` | 是否显示要下载表格数据的按钮 |
| 表格分类 | `String` | `table table-striped table-hover` | 表格为 HTML `class` 属性 |
| 排序模式 | `String` | `multiple` | 是否同时排序一列或多列 |
| 排序组件 | `Object`, (中文(简体) ), `String` | `DataTableSortingIndex` | 可分类列排序索引的 VueJS 组件 |
| 排序I 组件 | `Object`, (中文(简体) ), `String` | `DataTableSortingIcon` | VueJS 可排序列上的排序图标组件 |
| 页脚 | `Object`, (中文(简体) ), `String` | `null` | 用于自定义表脚的 VueJS 组件 |
| 允许出口 | `Array` | `["xls", "csv", "json", "txt"]` | 格式化用户可以导出数据。 只有四种出口类型. |

### 列数

| 键 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 键 | `String` | \- 说吧 | 中对象的键 `data` 道具 (英语). 匹配密钥的值将在表格单元格中显示 |
| 标题 | `String` | `titleCase(key)` | 在 `th` 键。 如果没有具体说明,它将利用 `key` 然后去掉它的破折号并下划线 |
| 可搜索 | `Bool` | `true` | 是否允许过滤对象 `data` 通过匹配 `search` 对象中的文本 `key` |
| 可排序 | `Bool` | `true` | 是否允许排序列 。 它会使用 `key` 来排序 `data` |
| 类型 | `String` | `string` | 将列排序为字符串或数字。 允许的值是 `string` 财务报告和审定财务报表 `number`。 。 。 . |
| 排序 函数 | `Function` | \- 说吧 | 用户提供的用于排序列的自定义函数 . |
| 指数 | `Number` | 0 个 | 更高的指数将列放入表右. 一个更低的指数将列放入表左边. |
| 组件 | `Object,String` | \- 说吧 | 自定义 Vue 组件由用户提供 。 这个组件应该有一个道具叫做 `data`,其中包含当前行的数据. |

若为 `columns` 没有定义, 那么 `columnKeys` 必须被定义,并且将会是 绘制为 `columns` 带有默认参数的矩阵。 示例

```javascript
// we can define the columns
config = {
    data: users,
    columns: [
        {
            key: "name",
        },
        {
            key: "email",
            title: "Email Address",
            sortable: false,
        },
        {
            key: "phone",
            sortable: false,
            searchable: false,
            /* this will make this column appear to the right of the table
            since its index is greater than others*/
            index: 100,
        },
        {
            key: "permissions",
            /* custom function sort users by which user has more permissions */
            sortingFunction: function(a, b) {
                // permissions is an array
                return a.permissions.length - b.permissions.length;
            },
            /* custom component to display the permissions */
            component: UserPermissionList,
        }
    ]
}

// or use columnKeys shortcut
config = {
    data: user,
    columnKeys: ["name", "email", "registered_at", "last_access_at"]
},

// which will take the default column and map the array into this
[
    {
        key: "name",
        title: "Name",
        sortable: true,
        searchable: true,
        index: 0
    },
    {
        key: "email",
        title: "Email",
        sortable: true,
        searchable: true,
        index: 0
    },
    {
        key: "registered_at",
        title: "Registered at",
        sortable: true,
        searchable: true,
        index: 0
    },
    {
        key: "last_access_at",
        title: "Last access at",
        sortable: true,
        searchable: true,
        index: 0
    },
]
```

#### 自定义组件

在上述例子中,我们使用了一个自定义组件"UserPermissionList". 下面是该自定义组件的样本.

```html
<template>
    <div>
        List of permissions for the user {{ data.name }} :
        <ul>
            <li v-for="(permission, i) in data.permissions" :key="i">
                {{ permission }}
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name: "UserPermissionList",
    props: {
        data: {
            type: Object,
            required: true
        }
    }
}
</script>
```

另一个实例, 使用动作按钮 :

```html
<template>
    <div class="action-buttons">
        <button class="btn btn-outline-success" @click="handleAction('view')">
            <i class="fa fa-eye"></i>
        </button>
        <button class="btn btn-outline-primary" @click="handleAction('edit')">
            <i class="fa fa-edit"></i>
        </button>
        <button class="btn btn-outline-dark" @click="handleAction('delete')">
            <i class="fa fa-trash"></i>
        </button>
    </div>
</template>
<script>
export default {
    name: "ActionButtons",
    methods: {
        handleAction(actionName) {
            /* when the user clicks a button, that will trigger a mutation on our Vuex store
            The mutation may show a form for editing a resource, or maybe a popup box asking
            the user to confirm deleting a resource, or open a new page for the user to view
            a resource.
             */
            this.$store.commit(actionName, this.data)
        }
    },
    props: {
        data: {
            type: Object,
            required: true,
        },
    },
};
</script>
```

### 文本

目前,VueDataTable有三种语言的支持:英语(en), 巴西葡萄牙语(pt-br)和西班牙语(s. 这个 `lang` 道具指定在 在表格中显示文本的语言.

如果我们想要添加自定义文本( 可能是因为没有语言支持或 因为我们想要别的东西, 我们必须把它放在 `text` 道具 (英语).

下表列出我们可以自定义的文本及其默认值 使用英语.

| 键 | 默认 |
| --- | --- |
| 每页图文 | "展出:参赛条目" |
| 信息文本 | "出道:第一至:最后:总条目" |
| 信息过滤文本 | "出道:先至:后至:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出出:已取出:已取出入入入入:已取出:已取出:已取出:已取出:已取出:已取出取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出:已取出已取出已取出已取出已取出 |
| 下一个按钮文本 | "下一个" |
| 上一个按钮文本 | "前传" |
| 搜索图文集 | "去页" |
| paginationSearch 按钮文本 | "GO" |
| 搜索文本 | "寻曰:" |
| 下载文本 | "出口为:" |
| 下载按钮文本 | "DOWNLOAD" (英语) |
| 空表格文本 | "没有找到匹配的记录" |

**说明**: 通知占位符 `:first`, (中文(简体) ), `:last`, (中文(简体) ), `:total`,以及 `filtered` 将自动替换为适当的数字.

示例代码 :

```javascript
parameters() {
    return {
        data: [/**/],
        columns: [/**/],
        text: {
            PerPageText: "Number of users per page :entries",
            infoText: "Displaying :first to :last of :total users",
            emptyTableText: "No users found :(",
        }
    }
}
```

#### 添加全局自定义语言

如果您的lang尚未支持, 您可以添加新语言并在任意语言中使用 VueDataTable 实例如下:

```javascript
import { languageServiceProvider } from "@andresouzaabreu/vue-data-table";
const loremIpsumLanguage = {
    perPageText: "lorem ppsum",
    nextButtonText: "labore nostrud",
    /* more ... */
};
languageServiceProvider.setLang("lorem", loremIpsumLanguage)

/**
 * @function setLang
 * @param {String} lang           the name of the language
 * @param {Object} translations   an object with the translated text
*/
```

您也可以修改任何对现有语言的默认文本,该文本将 反映全球的变化。 例如:

```javascript
// the default text for the download button in the export component is "export as"
// we may want change that to "download as"
languageServiceProvider.setLangText("en", "downloadText", "download as:")

/**
 * @function setLangText
 * @param lang
 * @param {String} key     the key in the lang object
 * @param {String} text    the text will be display to the user
*/
```

### 组件的自定义顺序

VueDataTable 使用 CSS 的网格显示来指定其组件的位置 (搜索过滤器,页码,条目信息,每个页面选项,下载按钮).

**我们可以通过包括我们的习惯来明确组件的位置 CSS/SCSS 并压倒默认值.**

默认情况下, VueDataTable 如何显示组件 :

```scss
.data-table {
    display: grid;
    width: 100%;
    grid-template-columns: 25% 25% 25% 25%;
    &> div {
        margin-top: 1rem;
        max-width: 100%;
    }
    & > .data-table-search-filter, .data-table-pagination, .data-table-export-data {
        margin-left: auto
    }
    @media (min-width: 1401px) {
        grid-template-areas:
            "perPage search search search"
            "table table table table"
            "info pagination pagination download";
    }
    @media (min-width: 1051px) AND (max-width: 1400px) {
        grid-template-areas:
            "perPage search search search"
            "table table table table"
            "info pagination pagination pagination"
            ". . download download";
    }
    @media (min-width: 851px) AND (max-width: 1050px) {
        grid-template-areas:
            "perPage search search search"
            "table table table table"
            "pagination pagination pagination pagination"
            "info info download download";
    }
    @media (max-width: 800px) {
        & > .data-table-pagination {
            flex-wrap: wrap;
        }
    }
    @media (min-width: 651px) AND (max-width: 850px) {
        grid-template-areas:
            "perPage search search search"
            "table table table table"
            "pagination pagination pagination pagination"
            "info info info info"
            "download download download download";
    }
    @media (max-width: 650px) {
        grid-template-areas:
            "search search search search"
            "perPage perPage perPage perPage "
            "table table table table"
            "pagination pagination pagination pagination"
            "info info info info"
            "download download download download";
        & > .data-table-per-page {
            margin-left: auto
        }
    }
}
```

请随意复制上面的样式,修改它,然后设置位置 组件.

### 自定义组件

除每个列的自定义组件外, 您还提供自定义组件 桌子的页脚,柱子的 `sorting icon` (如果 栏目排序,栏目 `sorting index` 联合国 当前列如果正在排序,并启用多列排序.

#### 页脚

财产 `footerComponent` 设置要制作表脚的组件. 元件可以是元件,也可以是元件 `Object`,或一个 `String` 等于 注册组件的名称.

这个 `footerComponent` 一定是个 `<tfoot>` HTML 元素及其必须具有 属性 `data`, (中文(简体) ), `dataDisplayed`, (中文(简体) ), `dataFiltered`如果组件不 在 `props`Vue可能认为他们是一些 自定义 HTML 属性及其值将显示为 HTML 属性,该属性 真的很乱.

财产 `data` 对应所有传送到VueDataTable的数据。 这个 `dataDisplayed` 对应当前可见的所有数据. 这个 `dataFiltered` 对应于所有通过查询过滤的数据. 这些属性可用于进行共通操作,例如计算 某个列的总行值的总和.

#### 示例

假设我们有一桌水果。 这个 `data` 是一系列对象 其财产为 `name`, (中文(简体) ), `price`,以及 `amount`我们可以提供一种习惯 页脚,以显示所购水果的总额和总价格.

脚印部分是:

```html
<template>
  <tfoot v-show="dataDisplayed.length > 0">
    <td>Total</td>
    <td></td> 
    <td>{{ totalAmount }}</td> 
    <td>{{ totalPrice }}</td>
  </tfoot>  
</template>
<script>
export default {
  name: "TableFooter",
  computed: {
    totalPrice() {
      let s = 0;
      for (let f of this.dataDisplayed)
        s += f.price * f.amount;
      return s;
    }, 
    totalAmount() {
      let s = 0;
      for (let f of this.dataDisplayed)
        s += f.amount;
      return s;
    }
  },
  props: {
    data: Array,
    dataDisplayed: Array,
    dataFiltered: Array,
  }
}
</script>
```

我们通过这个部分如下:

```html
<template>
    <data-table v-bind="tableProps"/>
</template>
<script>
import TableFooter from './TableFooter.vue'

export default {
    /* ... some code */
    data() {
        return {
            tableProps: {
                columns: [ /* ... code */ ],
                data: [ /* ... more code */ ],
                footerComponent: TableFooter,
            }
        }
    }
}
</script>
```

换句话说,您可以注册组件并传递字符串 :

```javascript
/* earlier on */
import TableFooter from './TableFooter.vue'
Vue.component("table-footer", TableFooter)

/* later on */
    footerComponent: "table-flooter"
```

#### 排序图标

默认情况下, VueDataTable 将显示箭头以指示排序方向 当排序一个列。 这个 `SortingIcon` 组件被包裹在一个 `th` 键。 这个 `th` 元素有一个 `data-sorting` 属性,可能是 `asc` 或者说 `desc` 只有这个 基于这个数值,我们显示一个 `arrow_up` 或一个 `arrow_down` 图标使用 `CSS` 规则.

```html
<template>
    <span class="data-table-sorting-icon">&nbsp;</span>
</template>
<style lang="scss" scoped>
.data-table-sorting-icon {
    &::after {
        content: "\2193";
    }
    &::before {
        content: "\2191";
    }
    &::after, &::before {
        opacity: 0.5;
    }
    [data-sorting="asc"] &::before, [data-sorting="desc"] &::after {
        opacity: 1;
    }
}
</style>
```

**说明**:一些代码被省略以保持其清洁.

如果我们想添加我们的定制图标,那么我们可以注册我们的 组件.

```javascript
import SortingIcon from "./path/to/SortIcon.vue";

export default {
    computed: {
        bindings() {
            return {
                SortingIconComponent: SortingIcon,
                data: [],
                /**/
            };
        }
    }
}
```

#### 排序索引图标

当排序多列时, VueDataTable 将显示带有索引的图标 显示在排序过程中哪个列具有优先级.

```html
<template>
    <span class="data-table-sort-index">
        {{ index }}
    </span>
</template>
```

如果我们想加入我们自己的组件, 我们可以注册它就像我们 以前有过.

```javascript
import SortingIndex from "./path/to/SortingIndex.vue";

export default {
    computed: {
        bindings() {
            return {
                SortingIndexComponent: SortingIndex,
                data: [],
                /**/
            };
        }
    }
};
```

在我们 `SortingIndex` 成分,我们必须有一个 `index` 属性,哪些 排序过程中列索引的通讯员.

```javascript
export default {
    name: "SortingIndex",
    props: {
        index: {
            type: Number,
            required: true
        }
    }
};
```

## 许可证

麻省理工学院

## 版本

这个项目使用 [交换器](http://semver.org/)。 。 。 .

## 捐款

拉动请求是非常受欢迎的.

## 常见问题

### @andresouzaabreu/vue-data-table 是什么？

添加高级特性到 HTML 表格的 Vue 插件

### 如何安装 @andresouzaabreu/vue-data-table？

在项目目录运行 npm install @andresouzaabreu/vue-data-table，或使用 pnpm add / yarn add / bun add。

### @andresouzaabreu/vue-data-table 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/andresouzaabreu\_\_vue-data-table 是否存在。

### @andresouzaabreu/vue-data-table 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @andresouzaabreu/vue-data-table 可以商用吗？

@andresouzaabreu/vue-data-table 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @andresouzaabreu/vue-data-table 的下载量有多少？

根据 npm 官方下载统计，@andresouzaabreu/vue-data-table 在 2026/10/06 – 2026/11/04 这 30 天内被下载 1,860 次，日均约 62 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @andresouzaabreu/vue-data-table 还在维护吗？

最新版本 3\.3\.4 发布于 2024/03/16（2 年前）；至今共发布 33 个版本，其中过去 12 个月发布了 0 个；首次发布于 2020/03/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。