vuejs 排序map
Vue好表 (Vue-good-table)
A simple, clean data table for VueJS (2.x) with essential features like sorting, column filtering, pagination etc.
一个简单,干净的VueJS(2.x)数据表,具有诸如排序,列过滤,分页等基本功能。
现场演示 (Live Demo)
https://xaksis.github.io/vue-good-demos/#/simple-table
https://xaksis.github.io/vue-good-demos/#/simple-table
入门 (Getting Started)
先决条件 (Prerequisites)
The plugin is meant to be used with existing Vue 2.x projects. It uses ES6 features so as long as your build process includes a transpiler, you're good to go.
该插件应与现有的Vue 2.x项目一起使用。 它使用ES6功能,因此只要您的构建过程包括一个编译器,您就可以轻松进行。
正在安装 (Installing)
Install with npm:
使用npm安装:
npm install --save vue-good-table
import into project:
导入项目:
import Vue from 'vue';
import VueGoodTable from 'vue-good-table';
Vue.use(VueGoodTable);
用法示例 (Example Usage)
<template>
<div>
<vue-good-table
title="Demo Table"
:columns="columns"
:rows="rows"
:paginate="true"
:lineNumbers="true"/>
</div>
</template>
<script>
export default {
name: 'test',
data(){
return {
columns: [
{
label: 'Name',
field: 'name',
filterable: true,
},
{
label: 'Age',
field: 'age',
type: 'number',
html: false,
filterable: true,
},
{
label: 'Created On',
field: 'createdAt',
type: 'date',
inputFormat: 'YYYYMMDD',
outputFormat: 'MMM Do YY',
},
{
label: 'Percent',
field: 'score',
type: 'percentage',
html: false,
},
],
rows: [
{id:1, name:"John",age:20,createdAt: '201-10-31:9:35 am',score: 0.03343},
{id:2, name:"Jane",age:24,createdAt: '2011-10-31',score: 0.03343},
{id:3, name:"Susan",age:16,createdAt: '2011-10-30',score: 0.03343},
{id:4, name:"Chris",age:55,createdAt: '2011-10-11',score: 0.03343},
{id:5, name:"Dan",age:40,createdAt: '2011-10-21',score: 0.03343},
{id:6, name:"John",age:20,createdAt: '2011-10-31',score: 0.03343},
{id:7, name:"Jane",age:24,createdAt: '20111031'},
{id:8, name:"Susan",age:16,createdAt: '2013-10-31',score: 0.03343},
{id:9, name:"Chris",age:55,createdAt: '2012-10-31',score: 0.03343},
{id:10, name:"Dan",age:40,createdAt: '2011-10-31',score: 0.03343},
{id:11, name:"John",age:20,createdAt: '2011-10-31',score: 0.03343},
{id:12, name:"Jane",age:24,createdAt: '2011-07-31',score: 0.03343},
{id:13, name:"Susan",age:16,createdAt: '2017-02-28',score: 0.03343},
{id:14, name:"Chris",age:55,createdAt: '',score: 0.03343},
{id:15, name:"Dan",age:40,createdAt: '2011-10-31',score: 0.03343},
{id:19, name:"Chris",age:55,createdAt: '2011-10-31',score: 0.03343},
{id:20, name:"Dan",age:40,createdAt: '2011-10-31',score: 0.03343},
],
};
},
};
</script>
This should result in the screenshot seen above
这应该导致上面看到的屏幕截图
Note: vue-good-table also supports dynamic td templates where you dictate how to display the cells. Example:
注意: vue-good-table还支持动态td模板,您可以在其中指示如何显示单元格。 例:
<vue-good-table
title="Dynamic Table"
:columns="columns"
:rows="rows"
:lineNumbers="true"
:defaultSortBy="{field: 'age', type: 'asec'}"
:globalSearch="true"
:paginate="true"
styleClass="table condensed table-bordered table-striped">
<template slot="table-row" scope="props">
<td>{{ props.row.name }}</td>
<td class="fancy">{{ props.row.age }}</td>
<td>{{ props.formattedRow.date }}</td>
<td>{{ props.index }}</td>
</template>
</vue-good-table>
Note:
注意:
The original row object can be accessed via
props.row
原始行对象可以通过
props.row
访问The currently displayed table row index can be accessed via
props.index
.当前显示的表格行索引可以通过
props.index
进行访问。The original row index can be accessed via
props.row.originalIndex
. You can access the original row object by usingrow[props.row.originalIndex]
.原始行索引可以通过
props.row.originalIndex
访问。 您可以使用row[props.row.originalIndex]
访问原始行对象。You can access the formatted row data (for example - formatted date) via
props.formattedRow
您可以通过
props.formattedRow
访问格式化的行数据(例如-格式化的日期)
组件选项 (Component Options)
Option | Description | Type, Example |
---|---|---|
title | Title shows up above the table | String, "Test Table" If not set, the title region is not created. |
columns | Array containing objects that describe table columns | For all column properties, see below |
rows | Array containing row objects | |
paginate | Enable Pagination for table | Boolean |
perPage | Number of rows per page | Integer (default: 10) |
onClick | Function to run when a row is clicked |
|
sortable | Enable sorting by clicking column | Boolean |
styleClass | Allows applying your own classes to table | String default: 'table table-bordered' |
lineNumbers | Enable sorting by clicking column | Boolean default: false |
defaultSortBy | Allows specifying a default sort for the table on wakeup | Object, example: |
Search Options | ||
globalSearch | Allows a single search input for the whole table Note: enabling this filter disables column filters | Boolean default: false |
searchTrigger (used with global search) | allows specifying searching on enter key rather than live search for large records | String searchTrigger="enter" |
externalSearchQuery | Allows global search via your own input field | Usage
|
Text Options - for those interested in using other languages | ||
globalSearchPlaceholder | Text for global search input place holder | default: "Search Table" |
nextText | Text for pagination 'Next' link | default: "Next" |
prevText | Text for pagination 'Prev' link | default: "Prev" |
rowsPerPageText | Text for pagination 'Rows per page' label | default: "Rows per page" |
ofText | Text for pagination 'x of y' label | default: "of" |
选项 | 描述 | 类型,示例 |
---|---|---|
标题 | 标题显示在桌子上方 | 字符串, "Test Table" 如果未设置,则不会创建标题区域。 |
列 | 包含描述表列的对象的数组 | 有关所有列的属性,请参见下文 |
行数 | 包含行对象的数组 | |
分页 | 为表启用分页 | 布尔型 |
每页 | 每页行数 | 整数( 默认值:10 ) |
onClick | 单击某行时运行的函数 |
|
可排序 | 通过单击列启用排序 | 布尔型 |
styleClass | 允许将自己的类应用于表 | 字符串默认值:“ table table-bordered” |
lineNumbers | 通过单击列启用排序 | 布尔默认值:false |
defaultSortBy | 允许在唤醒时为表指定默认排序 | 对象,例如: |
搜索选项 | ||
globalSearch | 允许对整个表格进行单个搜索输入注意:启用此过滤器会禁用列过滤器 | 布尔默认值:false |
searchTrigger(用于全局搜索) | 允许在回车键上指定搜索,而不是实时搜索大型记录 | 字符串searchTrigger =“ enter” |
externalSearchQuery | 允许通过您自己的输入字段进行全局搜索 | 用法
|
文字选项 -适用于有兴趣使用其他语言的人 | ||
globalSearchPlaceholder | 全局搜索输入占位符的文本 | 默认值:“搜索表” |
nextText | 分页文字“下一个”链接 | 默认值:“下一步” |
prevText | 分页“上一页”链接的文本 | 默认值:“上一页” |
rowsPerPageText | 分页“每页行数”标签的文本 | 默认值:“每页行数” |
文字 | 用于标签“ x of y”的文本 | 默认值:“ of” |
列选项 (Column Options)
Option | Description | Type, example | |
label (required) | Label to put on column header | String {label: "Name"} | |
field (required) | Row object property that this column corresponds to | Could be:
| |
type (optional) | type of column. default: 'text'. This determines the formatting for the column and filter behavior as well | Possible values:
| |
inputFormat (if type is date) | provide the format to parse date string | String eg: 'YYYYMMDD' //where date strings are '20170530' | |
outputFormat (if type is date) | provide the format for output date | String eg: 'MMM Do YY' //where date will be output like 'May 30th 17' | |
filterable (optional) | enables filtering on column | Boolean | |
filterTextInput (optional) | provides the column with a filter input | Boolean | |
filterDropdown (optional) | provides a dropdown for filtering | Boolean | |
filterOptions (required for filterDropdown) | provides options to dropdown filter filterOptions: ['Blue', 'Red', 'Yellow'] | Array | |
filter (optional) | Custom filter, function of two variables: function(data, filterString) , should return true if data matches the filterString, otherwise false. |
| |
html (optional) | indicates whether this column will require html rendering or not | Boolean, example: if row had a property 'htmlContent' like htmlContent: '<button>Hello</button>' , then html: true on the column will render a button | |
width (optional) | provide a width value for this column | example: width: '50px' | |
hidden (optional) | allow hiding a column on table | Boolean | |
tdClass (optional) | provide custom class(es) to the td | example: tdClass: 'text-center' | |
thClass (optional) | provide custom class(es) to the th | example: thClass: 'custom-th-style' |
选项 | 描述 | 类型,例子 | |
标签(必填) | 要放在列标题上的标签 | 字符串{label: "Name"} | |
字段(必填) | 此列对应的行对象属性 | 可能:
| |
类型(可选) | 列的类型。 默认值:“文本”。 这将确定列的格式以及过滤器的行为 | 可能的值:
| |
inputFormat (如果类型为日期) | 提供解析日期字符串的格式 | 字符串,例如: 'YYYYMMDD' //where date strings are '20170530' | |
outputFormat (如果类型是日期) | 提供输出日期的格式 | 字符串,例如: 'MMM Do YY' //where date will be output like 'May 30th 17' | |
可过滤(可选) | 启用列过滤 | 布尔型 | |
filterTextInput(可选) | 为列提供过滤器输入 | 布尔型 | |
filterDropdown(可选) | 提供用于过滤的下拉菜单 | 布尔型 | |
filterOptions(对于filterDropdown是必需的) | 提供下拉过滤器filterOptions: ['Blue', 'Red', 'Yellow'] 选项filterOptions: ['Blue', 'Red', 'Yellow'] | 数组 | |
过滤器(可选) | 自定义过滤器,具有两个变量的function(data, filterString) : function(data, filterString) ,如果数据与filterString匹配,则应返回true,否则返回false。 | ||
html(可选) | 指示此列是否需要html呈现 | 布尔值,例如:如果row具有像htmlContent: '<button>Hello</button>' 这样的属性'htmlContent htmlContent: '<button>Hello</button>' ,则列上的html:true将呈现一个按钮 | |
宽度(可选) | 提供此列的宽度值 | 例如: width: '50px' | |
隐藏(可选) | 允许隐藏表格上的一列 | 布尔型 | |
tdClass(可选) | 向td提供自定义类 | 示例: tdClass: 'text-center' | |
thClass(可选) | 提供自定义类 | 示例: thClass: 'custom-th-style' |
样式选项 (Style Options)
Vue-good-table allows providing your own css classes for the table via styleClass option but it also has in-built classes that you can make use of
Vue-good-table允许通过styleClass选项为表提供自己CSS类,但它也具有内置类,您可以利用它们
。表 (.table)
.table .table-bordered (.table .table-bordered)
.table .table剥离 (.table .table-stripped)
.table .table-stripped .table-bordered .condensed (.table .table-stripped .table-bordered .condensed)
翻译自: https://vuejsexamples.com/a-simple-clean-data-table-for-vuejs2-with-essential-features-like-sorting/
vuejs 排序map