vuejs 排序map_vuejs2的简单干净数据表，具有排序之类的基本功能

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 using row[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	[ { label: 'Name', field: 'name', filterable: true, } //... ] 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	<vue-good-table :columns="columns" :onClick="onClickFn" :rows="rows"/> // data data() { return { // rows, columns ... onClickFn: function(){ console.log('something'); }, }; }
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 <input type="text" v-model="searchTerm" /> <vue-good-table :columns="columns" :paginate="true" :externalSearchQuery="searchTerm" :rows="rows"/>
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" 如果未设置，则不会创建标题区域。
列	包含描述表列的对象的数组	[ { label: 'Name', field: 'name', filterable: true, } //... ] 有关所有列的属性，请参见下文
行数	包含行对象的数组
分页	为表启用分页	布尔型
每页	每页行数	整数( 默认值：10 )
onClick	单击某行时运行的函数	<vue-good-table :columns="columns" :onClick="onClickFn" :rows="rows"/> // data data() { return { // rows, columns ... onClickFn: function(){ console.log('something'); }, }; }
可排序	通过单击列启用排序	布尔型
styleClass	允许将自己的类应用于表	字符串默认值：“ table table-bordered”
lineNumbers	通过单击列启用排序	布尔默认值：false
defaultSortBy	允许在唤醒时为表指定默认排序	对象，例如：
搜索选项
globalSearch	允许对整个表格进行单个搜索输入注意：启用此过滤器会禁用列过滤器	布尔默认值：false
searchTrigger(用于全局搜索)	允许在回车键上指定搜索，而不是实时搜索大型记录	字符串searchTrigger =“ enter”
externalSearchQuery	允许通过您自己的输入字段进行全局搜索	用法 <input type="text" v-model="searchTerm" /> <vue-good-table :columns="columns" :paginate="true" :externalSearchQuery="searchTerm" :rows="rows"/>
文字选项 -适用于有兴趣使用其他语言的人
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: String eg: 'name' - simple row property name String eg: 'location.lat'- nested row property name. lets say if the row had a property 'location' which was an object containing 'lat' and 'lon' Function - a function that returns a value to be displayed based on the row object
type (optional)	type of column. default: 'text'. This determines the formatting for the column and filter behavior as well	Possible values: number - right aligned decimal - right aligned, 2 decimal places percentage - expects a decimal like 0.03 and formats it as 3.00% date - expects a string representation of date eg '20170530'
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.	filter: function(data, filterString) { var x = parseInt(filterString) return data >= x-5 && data <= x+5 } would create a filter matching numbers within 5 of the provided value.
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"}
字段(必填)	此列对应的行对象属性	可能： 字符串， eg: 'name'简单的行属性名称 字符串， eg: 'location.lat'嵌套的行属性名称。 可以说该行是否具有属性“ location”，该属性是包含“ lat”和“ lon”的对象 函数-根据行对象返回要显示的值的函数
类型(可选)	列的类型。 默认值：“文本”。 这将确定列的格式以及过滤器的行为	可能的值： 数字-右对齐 小数点-右对齐，小数点后2位 百分比-期望像0.03这样的小数，并将其格式化为3.00％ 日期-需要日期的字符串表示形式，例如'20170530'
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