将本地化添加到 vue-tables2 table

Question

Here 是我项目中的 table 的类似示例。

我的项目是一个多语言网站，所以我想将 vue-table 也翻译成用户当前使用的语言。我要翻译的只是 table 元素，而不是 table 中的实际数据。例如，示例中的字符串 'records' 应该被翻译成用户的语言。分页下的文本 'Showing 1 to 10 of 50 records' 也应翻译。

.

示例代码：

Vue.use(VueTables.ClientTable);
new Vue({
  el: "#app",
  data: {
    columns: ['name', 'code', 'uri'],
    data: getData(),
    options: {
      headings: {
        name: 'Country Name',
        code: 'Country Code',
        uri: 'View Record'
      },
      sortable: ['name', 'code'],
      filterable: ['name', 'code']
    }
  }
});

和HTML：

<div id="app">
  <v-client-table :columns="columns" :data="data" :options="options">
    <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>

    <div slot="child_row" slot-scope="props">
      The link to {{props.row.name}} is <a :href="props.row.uri">{{props.row.uri}}</a>
    </div>

  </v-client-table>
</div>

如果有人知道我应该怎么做，我将不胜感激。

Answer 1

在documentation there is the "texts" option which refers to the "texts" option within this file.

因此，在您的数据中，您只需添加 texts 参数并对其进行编辑即可：

new Vue({
    el: "#app",
    data: {
        columns: ['name', 'code', 'uri'],
        data: getData(),
        options: {
            headings: {
                name: 'Country Name',
                code: 'Country Code',
                uri: 'View Record'
            },
            sortable: ['name', 'code'],
            filterable: ['name', 'code'],
            // EDITABLE TEXT OPTIONS:
            texts: {
                count: "Showing {from} to {to} of {count} records|{count} records|One record",
                first: 'First',
                last: 'Last',
                filter: "Filter:",
                filterPlaceholder: "Search query",
                limit: "Records:",
                page: "Page:",
                noResults: "No matching records",
                filterBy: "Filter by {column}",
                loading: 'Loading...',
                defaultOption: 'Select {column}',
                columns: 'Columns'
            },
        }
    }
});

将本地化添加到 vue-tables2 table

Add localization to vue-tables2 table

javascript

vue.js

vue-tables-2