English Docs for Vue EasyTable

中文文档地址

Basic Usage1

do not set the width of last column.

Set the total width of the table, the last column is not set, then the width of the last column will be automatically calculated.

Basic Usage 2

just set width of each column

Do not set the total width of the table, only set the width of each column, the total width of the table will be automatically calculated.

Auto resize horizontally

Simple reponsive table

Auto reszing is composed of vertical ~ (height auto size) and horizontal ~ (width auto resize).

If you need table to be auto resized horizontally, the following should be required:

• is-horizontal-resize : enable the horizontal resizing // todo
• isResize of column which will be resized
• style="width: 100;" set percentage of show. (It's up to you)
• each column must set width property and valid value which is minimum width of adaptive.

if you need table to be auto resized vertically, just set is-vertical-resize=true for table

auto resize horizontally in container

auto resize in container

auto resize horizontally for complex table

auto resize in container

Auto resize vertically

Simple reponsive table

Auto reszing is composed of vertical ~ (height auto size) and horizontal ~ (width auto resize).

If you need table to be auto resized horizontally, the following should be required:

• is-horizontal-resize property to open the horizontal resizing
• isResize property of column which will be resized
• style="width: 100;" set percentage of show. (It's up to you)
• each column must set width property and valid value which is minimum width of adaptive.

if you need table to be auto resized vertically, just set is-vertical-resize=true for table

Auto resize vertially

Simple reponsive table

Auto reszing is composed of vertical ~ (height auto size) and horizontal ~ (width auto resize).

If you need table to be auto resized horizontally, the following should be required:

• is-horizontal-resize property to open the horizontal resizing
• isResize property of column which will be resized
• style="width: 100;" set percentage of show. (It's up to you)
• each column must set width property and valid value which is minimum width of adaptive.

if you need table to be auto resized vertically, just set is-vertical-resize=true for table

✨

Custom Column Template

Common Usage

Set formatter function for some column to process data simply. formatter receive rowData, rowIndex, pagingIndex, field as arguments.

Advanced Usage

Assign a vue component to componentName. This component receivew rowData, field, index as props.

Pass event on-custom-comp to communicate between parent component and child component.

Custom Cell Style

Custom cell style of table header: add property titleCellClassName for column which is customed.

Custom cell style of table column: add columnCellClassName method for table.

Resize table columns dragging them manually

Enable column width variable by dragging by setting columns-width-drag prop for table.

Multi Select

Select multiple rows.

Simple Usage

Enable multi select by setting type: selection for columns.

Custom Events:

• select-all emitted after select all, the event return selection(already selected item) as argument.
• select-change emitted after a row is selected, the event return selection(already selected item) and rowData(selected item just) as arguments.
• select-groupby-change emitted when any selected item changed, the event return selection as argument.

Advanced Usage

Notice: if there is some item which is unable to be checked, the table will be in partial selected state.

• add _checked: true for table-data to set current item be seleted by default.
• add _disabled: true for table-data to set current item be forbidden to be selected by default.

Table Cell Edit

Easy table is an editable component, users have possibility to edit it manually.

When isEdit is set to true on the column, the default bahaviour of the table is to convert the cells of the column into textboxes and remove data formatting.

In other words the user will be able to edit the raw data. After typing into the textbox will call cell-edit-done prop(a function) on table.

Bind a funtion that will be called after the cell is edited to cell-edit-done. The arguments are newValue, oldValue,rowIndex、rowData、field, you can reassign new value for the edited row.

Notice: direct DOM manipulation will destroy Vue’s reactivity system. It's better to reassign value for the edited row to set the view "react".

Rowspan and colspan

Configuring rowspan and colspan allows you to merge cells

Assign a callback function to cell-merge prop for table to merge cells.

Tips: use colspan for merged column, use rowspan for merged row 通过设置 content为合并后单元格内容（html），也可通过 componentName 将组件作为合并后单元格内容

Filter

Simple Table Header filter

• Add property filters for specified column enable filter. The tyepe of filters is Array.
• If set filterMultiple: true, use the multiselect mode. The default type is single select.

columns: [
  {
    field: 'name',
    title: 'Name',
    filterMultiple: true, // You can choose both lily and peter to filter.
    filters: [{
      label: 'Lily',
      value: 'lily',
    }, {
      label: 'Peter',
      value: 'peter',
    }]
  }
]

• pass a filter function for prop filter-method to filter data indeed. arguments of filter function is the choices that user select, so you can change table-data with the arguments.

methods: {
  /**
    * just select gender: boy => { "name":null, "gender": ["boy"] }
    * just select name: lily  => { "name": ["lily"], "gender": null }
    * select name: lily and gender: boy =>  { "name": ["lily"], "gender": ["boy"] }
    * click reset（重置）in the header of column whose mode is multiselect =>  { "name": null, "gender": null }
  */
  filterMethod(params) {
    let tableData = this.getTableData();
    // filter params gender
    if (Array.isArray(params.gender)){
        tableData = tableData.filter(item => item.gender === params.gender[0])
    }
    // filter params name
    if (Array.isArray(params.name)){
        tableData = tableData.filter(item => params.name.indexOf(item.name) > -1);
    }
    this.tableData = tableData;
  },
  getTableData(){
    return [
      {"name":"lily","gender":"girl"},
      {"name":"peter","gender":"boy"},
      {"name":"john","gender":"boy"},
    ]
  }
},
created(){
  // :table-data="tableData"
  this.tableData = this.getTableData();
}

Complex Table Header filter

Summary footer

For table of numbers, you can add extra rows at the table footer displaying each column's summary info.

prop footer: an array to show summary info of table. footer can be multi rows. Each row means a kind of summary info. prop footer-cell-class-name: set cell style of footer prop footer-row-height: set line-height of each footer row(40px by default).

Notice: Because the format of summary info is different, ie: Sum, Average, Max, Min, Multiply etc. Also, digital decimal precision may not be same, so summary info should be provided by user.

Loading Status and Error Message

# Enable loading

If fetching data of table may take a long time, you can enable loading. Usage:

• prop is-loading: true to open loading status.
• when fetching data finished, set is-loading: false to close loading status.

# Custom loading message and error message

• prop loading-content: custom loading content.
• prop error-content : custom error content.

Sort

# Single field sort

• prop multiple-sort: false to enable sorting on single field.
• prop sort-always to enable sorting only in asc and desc order.
• sort-change emitted after icon clicked of column. the argument is the column field and sort order.

<v-table
  sort-always
  @sort-change="sortChange"
></v-table>

// javascript
sortChange(params) {
  // desc sort by name => {"name":"desc","tel":""}
}

# Multi field sort

• prop multiple-sort: true to enable sorting on multi field.
• prop sort-always to enable sorting only in asc and desc order.
• sort-change emitted after icon clicked of column. the argument is the column field and sort order.

<v-table
  sort-always
  :multiple-sort="true"
  @sort-change="sortChange"
></v-table>

// javascript
sortChange(params) {
  // first click name(desc), and then click tel(asc)=> {"name":"desc","tel":"asc"}
}

Fixed header and fixed column

Simple Usage

• fixed header

just set prop height for table. If the height you give is greater than actual height of table, the actual height is the criterion.

<v-table
  :height="800"
></v-table>

• fixed column

property isFrozen: true for column.

data() {
  return {
    columns: [
      {
        field: 'name',
        title: 'Name',
        isFrozen: true
      }
    ]
  }
}

Advanced Usage

Set titleRows to merge header.

Each item of titleRows corresponds to each row of header. propterty fields is the column fields that need to be merged.

set colspan to merge columns. set rowspan to merge rows.

Hidden Table

Switch table show and hide, need to use resize to force the table resized.

Notice: the height of element with style display: none; is unavaliable, so mannual call resize is necessary。If there is a better way, this method will be deprecated later!

API

Prop

Property	Description	Type	Accepted values	Default
type	button type	string		-
size	button size	string	lg/md/sm	md