1

我正在尝试获得有关特定vue-tables-2包实现的帮助。为了做到这一点，我正在尝试设置一个 jsfiddle，t is undefined即使是最基本的实现也会不断出错。有没有其他人遇到过这个错误？我怀疑它与依赖项的导入有关，但似乎无法解决它。

我很感激有关如何启动和运行 jsfiddle 的任何建议。

HTML

<div id="app">
  <div class="col-md-8 col-md-offset-2">
    <div id="people">
      <v-server-table url="https://jsonplaceholder.typicode.com/users" :columns="columns" :options="options">
      </v-server-table>
    </div>
  </div>
</div>

JavaScript

Vue.use(VueTables.ServerTable);

new Vue({
    el: "#people",
    data: {
        columns: ['name', 'username'],
        options: {
            // see the options API
        }
    }
});

https://jsfiddle.net/kbpq5vb3/35/

4

2 回答 2

3

似乎服务器没有提供正确的数据格式vue-tables-2，如文档中所述：

您需要返回一个带有两个属性的 JSON 对象：

  • data : array - 具有相同键的行对象数组。
  • count: number - 限制前的总数。

如果您无法更改服务器返回的内容，则可能必须使用客户端表，您可以在其中使用axios.

axios用于抓取数据 的最小客户端表示例。https://jsfiddle.net/kbpq5vb3/38/

于 2017-12-28T20:44:32.267 回答
0

如果您无法更改服务器返回的内容，则可能必须使用客户端表，您可以在其中使用 axios 获取数据。

不必要。您可以坚持使用服务器组件并使用requestAdapter和responseAdapter选项将请求和响应塑造成预期的格式。

例如（使用 Github 的 API）：

<div id="app">
  <h3>
    Vue Tables 2 - Server Side Demo
  </h3>
  <div class="col-md-8 col-md-offset-2">
    <div id="people">
      <v-server-table url="https://api.github.com/users/matfish2/repos" :columns="columns" :options="options">
      </v-server-table>
    </div>
  </div>
</div>

JavaScript

Vue.use(VueTables.ServerTable);

new Vue({
  el: "#people",
  methods: {
    formatDate(date) {
      return moment(date).format('DD-MM-YYYY HH:mm:ss');
    }
  },
  data: {
    columns: ['name', 'created_at', 'updated_at', 'pushed_at'],
    tableData: [],
    options: {
      perPage: 25,
      perPageValues: [25],
      orderBy: {
        column: 'name',
        ascending: true
      },
      requestAdapter(data) {
        return {
          sort: data.orderBy,
          direction: data.ascending ? 'asc' : 'desc'

        }
      },
      responseAdapter({data}) {
        return {
          data,
          count: data.length
        }
      },
      filterable: false,
      templates: {
        created_at(h, row) {
          return this.formatDate(row.created_at);
        },
        updated_at(h, row) {
          return this.formatDate(row.updated_at);
        },
        pushed_at(h, row) {
          return this.formatDate(row.pushed_at);
        }
      }
    }
  }
});

https://jsfiddle.net/matfish2/js4bmdbL/

于 2018-03-17T00:13:25.620 回答