向 vue-tables2 表添加本地化

Question

Here 是我项目中的一个类似的表示例。

我的项目是一个多语言网站，所以我希望将 vue-table 也翻译成用户当前使用的语言。我要翻译的只是表格元素，而不是表格中的实际数据。例如，在示例中，字符串“记录”应翻译为用户语言。还应翻译分页下的文本“显示 50 条记录中的 1 到 10 条”。

.

示例代码：

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 中有一个“texts”选项，它指的是这个file 中的“texts”选项。

因此，在您的数据中，您只需添加 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'
            },
        }
    }
});