Will Dx

人世一身霜雪, 归来仍是少年.

vue实例-grid表格02

Posted April 07, 2017

本地测试

HTML
<!doctype html>
<html>
<head>
  <title>Vue Grid Demo</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="col-md-12">
      <h1>Vue Grid</h1>
      <div class="row">
      <div class="col-md-6">
        <label for="search-query"></label>
        <input type="text" id="search-query" v-model="searchQuery" class="form-control" placeholder="Search..." style="width: 200px">
      </div>
      <div class="col-md-6">
        <pagination id="my-table" class="pull-right"></pagination>
      </div>
      </div>
      <grid rows="{{gridData}}" columns="{{gridColumns}}" filter-key="{{searchQuery}}" per-page="5" id="my-table"></grid>
      <hr>
      <grid rows="{{gridData2}}" columns="{{gridColumns2}}" per-page="10" id="another-table"></grid>
      <pagination id="another-table"></pagination>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.1/vue.js"></script>
  <script src="http://iwillb.imdancer.com/vue-grid.js"></script>
<script>
var vm = new Vue({
  el: 'body',
  data: function() {
    return {
      searchQuery: '',
      gridColumns: ['name', 'age'],
      gridData: [
        { name: 'Barack Obama', age: 53 },
        { name: 'Some Dude', age: 24 },
        { name: 'Tv Dude', age: 28 },
      ],
      gridColumns2: ['name'],
      gridData2: [
        {
          name: 'Aaron'
        },
        {
          name: 'Abdiel'
        },
      ]
    };
  }
});
</script>
</body>
</html>

线上测试

{% iframe https://jsfiddle.net/willdx/dcwxnokL/16/embedded/ 100% 600 %}