将本地化添加到vue-tables2表

Question

这是我项目中类似的表格示例。

我的项目是一个多语言网站，所以我希望将vue-table也翻译成用户当前使用的语言。我要翻译的只是表元素，而不是表内部的实际数据。例如，在示例字符串“ records”中应将其翻译为用户语言。分页下的“显示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

在文档中，有“文本”选项，它引用此文件中的“文本”选项。

因此，您可以在数据中简单地添加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'
            },
        }
    }
});