Vue Datagrid

当前版本：0.0.9

该组件是基于vue2 、 bulma0.5.1 完成的table组件。 table组件部分借鉴了vue2-datatable-component(基于Bootstrap 3)

功能

-[x] 自定义分页 -[x] 自定义表头 -[x] 多语言 -[x] 丰富的API

下载

• npm install vue-datagrid -s

使用

import Datagrid from 'vue-datagrid'
Vue.use(Datagrid)

<datagrid v-bind="$data"></datagrid>

export default {
  components: {
  },
  data () {
    return {
      columns: [
        { title: 'User ID', field: 'uid', sort: true },
        { title: 'Username', field: 'name' },
        { title: 'Age', field: 'age', sort: true },
        { title: 'Email', field: 'email' },
        { title: 'Country', field: 'country' }
      ],
      data: [],
      total: 0,
      query: {}
    }
  },
  watch: {
    query: {
      handler (query) {
        // 根据query查询数据
        // 最终需要填充下面两个属性即可
        this.data = rows
        this.total = total
      },
      deep: true
    }
  }
}

本地开发

• npm imstall
• npm run dev

更新记录

• v0.0.9

  • 更新bulma插件

• v0.0.8

  • 新增格式化时间的渲染
  • 修复分页插件中国际化

• v0.0.7

  • 修复分页快速跳转不正确的bug