@2alheure/vue-datatable 中文文档教程

Question

Vue.js DataTable

Vue.js DataTable 是一个 Vue.js 组件，它为表格提供功能，例如排序、搜索或分页。
它的灵感来自 jQuery 插件 DataTables。
该组件兼容 Vue 3。

Table of contents

• Vue.js DataTable
• Table of contents
• Installation
  • Dependencies
  • Test
• Usage
  • Basic Usage
  • Template / Slot usage
• Props
  • About the headers prop
  • About translations
• Events

Installation

首先运行 npm install @2alheure/vue-datatable。 然后您可以使用 import DataTable from "@2alheure/vue-datatable"; 导入组件。

Dependencies

此包依赖于另外两个：此包中

• @2alheure/vue-pagination
• lodash

Test

的 test 命令使用 @pixelastic。

Usage

Basic Usage

最低配置用法如下：

<DataTable :headers="headers" v-model="users" />

<script>
import DataTable from "@2alheure/vue-datatable";

export default {
  components: {
    DataTable
  },
  data() {
    return {
      headers: [
        { html: "ID", linkTo: "id" },
        { html: "Gender", linkTo: "gender" },
        { html: "First Name", linkTo: "first_name" },
        { html: "Last Name", linkTo: "last_name" },
        { html: "Email", linkTo: "email" },
        { html: "IP Address", linkTo: "ip_address" }
      ],
      users: [
        {
          "id": 1,
          "first_name": "<b>Virginie</b>",
          "last_name": "Merrin",
          "email": "vmerrin0@howstuffworks.com",
          "gender": "Female",
          "ip_address": "86.87.125.205"
        },
        {
          "id": 2,
          "first_name": "<b>Mariana</b>",
          "last_name": "Dorgan",
          "email": "mdorgan1@indiegogo.com",
          "gender": "Female",
          "ip_address": "188.236.23.74"
        },
        {
          "id": 3,
          "first_name": "<b>Karalee</b>",
          "last_name": "Dod",
          "email": "kdod2@va.gov",
          "gender": "Female",
          "ip_address": "82.75.65.131"
        }
      ]      
    }
  }
};
</script>

请注意 v-model 指令。 users 对象将被组件修改。 如果需要，请考虑复制您的数据，而不是将其直接传递给组件。
请注意，在此配置中，headers 属性的顺序很重要。 列将按该顺序显示。
headers.linkTo 属性必须对应于 v-model 链接对象的属性。

Template / Slot usage

您也可以更冗长并编写自己的行模板。
下面是一个示例，对应于上面

<DataTable v-model="users">
  <template #thead>
    <tr>
      <th>ID</th>
      <th>Gender</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
      <th>IP Address</th>
    </tr>
  </template>

  <tr v-for="(user, index) in users" :key="index">
  <td
      v-for="(header, headerIndex) in headers"
      :key="index+'-'+headerIndex"
      v-html="user[header.linkTo]"
  ></td>
  </tr>
</DataTable>

<script>
import DataTable from "@2alheure/vue-datatable";

export default {
  components: {
    DataTable
  },
  data() {
    return {
      users: [
        // Same as above
      ]
    }
};
</script>

的那个：

  <template #thead>
    <tr>
      <th data-order-by="id">ID</th>
      <th data-order-by="gender">Gender</th>
      <th data-order-by="first_name">First Name</th>
      <th data-order-by="last_name">Last Name</th>
      <th data-order-by="email">Email</th>
      <th data-order-by="ip_address">IP Address</th>
    </tr>
  </template>

Props

Name	Type	Default value	Description
modelValue	Array	none	The prop linked to the v-model directive (mandatory).
headers	Array	none	Refer to the "About the headers prop" section.
identifier	String	A randomly generated string	The id of the component. Used by default to distinguish two different DataTable components.
ascSymbol	String	↓	The symbol when a column is ordered ascendingly.
descSymbol	String	↑	The symbol when a column is ordered descendingly.
neutralSymbol	String	↕	The symbol when a column is not ordered.
byPageOptions	Array	[10, 25, 50, 100]	The possible values for the number of elements by page.
paginationProps	Object	null	See the Pagination component props.
hover	Boolean	false	Whether an hovered row should be styled to be a bit more visible.
stripe	Boolean	false	Whether the table should style rows such as even rows are greyish.
translation	String | Object	en	Refer to the "About translations" section.

About the headers prop

headers prop is ma​​ndatory when you use the DataTable without指定

• html: This will be the HTML content of the <th> tag
• linkTo: This is the property of the corresponding key in the v-model linked prop for the column.

About translations

翻译可以是一个字符串，对应于以下值之一：

• de: german
• en: english (default value)
• es: spanish
• fr: french

您也可以提供一个对象，它将替换默认的翻译句子。
翻译对象如下所示（这是默认的）：

{
  "noContent": "There is nothing to print.",
  "showing": "Showing lines {0} to {1} of {2}.",
  "search": "Search"
}

如果您提供一个对象，它必须匹配此模板，并且所有键都是必需的。

Events

Name	Value type	Value	Description
update:modelValue	Array	The new value of the v-model linked prop	Emitted each time a change in made in the component
page	Number	The page number	Emitted each time the page changes (including when searching)
by-page	Number	The number of elements by page	Emitted each time the number of elements by page changes
order-by	String	The column to order by	Emitted each time the order changes
search	String	The search string	Emitted each time a search is made