插件名称 | vue-sorted-table |
---|---|
发布时间 | 2020年12月15日 |
插件作者 | BernhardtD |
sorted-table是Vue.js组件,将基本的Sortable功能应用于HTML表。
# NPM
$ npm install vue-sorted-table --save
1.安装并导入排序表组件。
import SortedTablePlugin from "vue-sorted-table";
2.注册组件。
Vue.use(SortedTablePlugin);
3.在模板中创建一个可排序的表。
<template>
<div id="app">
<sorted-table :values="values">
<thead>
<tr>
<th scope="col" style="text-align: left; width: 10rem;">
<sort-link name="id">ID</sort-link>
</th>
<th scope="col" style="text-align: left; width: 10rem;">
<sort-link name="name">Name</sort-link>
</th>
<th scope="col" style="text-align: left; width: 10rem;">
<sort-link name="hits">Hits</sort-link>
</th>
</tr>
</thead>
<template #body="sort">
<tbody>
<tr v-for="value in sort.values" :key="value.id">
<td>{{ value.id }}</td>
<td>{{ value.name }}</td>
<td>{{ value.hits }}</td>
</tr>
</tbody>
</template>
</sorted-table>
</div>
</template>
4.填充HTML表。
export default {
name: "App",
data: function() {
return {
values: [
{ name: "Plugin Foo", id: 2, hits: 33 },
{ name: "Plugin Bar", id: 1, hits: 42 },
{ name: "Plugin Foo Bar", id: 3, hits: 79 }
]
};
}
};
5.自定义排序图标。
Vue.use(SortedTablePlugin,{ ascIcon: 'asc icon here', descIcon: 'desc icon here' });
v1.3.0(12/12/2020)
官网:https://github.com/BernhardtD/vue-sorted-table
演示:https://www.vue365.cn/code_demo.php?id=3424
GitHub下载:https://github.com/BernhardtD/vue-sorted-table/archive/master.zip