vue2.0组件同步数据_数据表简化了Vue 2.x的数据表组件

vue2.0组件同步数据

vuetable-2 (vuetable-2)

Vuetable-2 - data table simplify!

Vuetable-2-数据表简化！

Vuetable-2适用于Vue 2.x，vuetable适用于Vue 1.x (Vuetable-2 works with Vue 2.x, vuetable is for Vue 1.x)

If you're looking for the version that's working with Vue 1.x, please go to vuetable repo.

如果您正在寻找适用于Vue 1.x的版本，请转到vuetable 。

---

---

现场演示 (Live Demo)

https://codepen.io/ratiw/pen/GmJayw

https://codepen.io/ratiw/pen/GmJayw

文档和教程 (Documentation and Tutorial)

Documentation is still under development, but you can view it at https://ratiw.github.io/vuetable-2. Thanks to @cristijora for the help.

文档仍在开发中，但是您可以在https://ratiw.github.io/vuetable-2上查看它。 感谢@cristijora的帮助。

Meanwhile, check out

同时，退房

• the Tutorial with follow-along project here. It should be enough to get you started.

  这里有后续项目的教程 。 它应该足以让您入门。

• Sample project using Vuetable-2 with Laravel 5.4 and Laravel-Mix

  使用Vuetable-2和Laravel 5.4和Laravel-Mix的示例项目

If you've been using Vuetable for Vue 1.x before, checkout what's changed for info on changes from Vuetable for Vue 1.x and the upgrade guide on how you could upgrade from Vuetable for Vue 1.x.

如果您以前曾使用Vuetable for Vue 1.x，请查看已更改的内容，以获取有关Vuetable for Vue 1.x 的更改信息，以及有关如何从Vuetable for Vue 1.x 升级的升级指南 。

You can now make use of Vue's scoped slot using the new __slot special field, thanks to @sjmarve. That means you are able to define action buttons per instance of a data table without depending on a globally defined component.

现在，借助__slot ，您可以使用新的__slot特殊字段来使用Vue的作用域插槽。 这意味着您可以为每个数据表实例定义操作按钮，而无需依赖全局定义的组件。

Use scoped slot in parent when defining the actions Vue Doc for scopped Slots

在为作用域插槽定义操作Vue Doc时，在父级中使用作用域插槽

e.g.

例如

<template slot="actions" scope="props">
    <div class="table-button-container">
        <button class="btn btn-default" @click="onClick('edit-item', props.rowData)"><i class="fa fa-edit"></i> View</button>&nbsp;&nbsp;
        <button class="btn btn-danger" @click="onClick('delete-item', props.rowData)"><i class="fa fa-remove"></i> Edit</button>&nbsp;&nbsp;
    </div>
</template>

the onClick function can now be defined in the parent and the parent has Access to rowData and rowIndex via props. :)

现在可以在父级中定义onClick函数，并且父级可以通过props访问rowData和rowIndex。 :)

The original functionality still works

原始功能仍然有效

重大变化 (Breaking Changes)

v1.6.0 (v1.6.0)

• The icons prop of VuetablePagination is now moved into the css prop object. See this codepen.

  现在将VuetablePagination的icons prop移到css prop对象中。 看到这个codepen 。

范例程式码 (Example Code)

• Clone the project

  克隆项目

• Go into the cloned directory

  进入克隆目录

• npm install

  npm install

• npm run dev

  npm run dev

• Open browser to http://localhost:8080

  打开浏览器到http://localhost:8080

用法 (Usage)

NPM (NPM)

npm install vuetable-2 --save-dev

通过CDN的Javascript (Javascript via CDN)

Thanks to @cristijora for providing helps on this.

感谢@cristijora在此方面提供的帮助。

// vuetable-2 dependencies
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.1/axios.min.js"></script>
// vuetable-2
<script src="https://unpkg.com/[email protected]"></script>
Vue.use(Vuetable)

This is demonstrated in this jsfiddle.

这在jsfiddle中得到了证明。

The .use from above will register all the components globally.

上面的.use将全局注册所有组件。

function install(Vue){
  Vue.component("vuetable", Vuetable);
  Vue.component("vuetable-pagination", VueTablePaginationInfo);
  Vue.component("vuetable-pagination-dropdown", VueTablePaginationDropDown);
  Vue.component("vuetable-pagination-info", VueTablePaginationInfo);
}

Also you have the ability to access certain components if you need them:

如果需要，您还可以访问某些组件：

VueTable: VueTable.default/VueTable.VueTable,
VueTablePagination: VueTable.VueTablePagination,
VueTablePaginationInfo: VueTable.VueTablePaginationInfo,
VueTablePaginationDropdown: VueTable.VueTablePaginationDropdown

翻译自: https://vuejsexamples.com/data-table-simplify-datatable-component-for-vue-2-x/

vue2.0组件同步数据