Used to display multiple records with similar structures. Data can be sorted, filtered, compared, or customized with other actions.

Table Attributes

Parameter	Description	Type	Optional Values	Default
data	Data to display	array	-	-
height	Table height. Default is automatic height. If height is a number, the unit is px; if height is a string, this height is set as Table style.height, and Table height is controlled by external styles.	string/number	-	-
max-height	Maximum height of Table. Valid values are numbers or heights with the px unit.	string/number	-	-
stripe	Whether the table uses zebra stripes	boolean	-	false
border	Whether vertical borders are shown	boolean	-	false
size	Table size	string	medium / small / mini	-
fit	Whether column width automatically expands	boolean	-	true
show-header	Whether to show the table header	boolean	-	true
highlight-current-row	Whether to highlight the current row	boolean	-	false
current-row-key	Key of the current row; write-only property	String,Number	-	-
row-class-name	Callback for row className. A string can also be used to set a fixed className for all rows.	Function({row, rowIndex})/String	-	-
row-style	Callback for row style. A fixed object can also be used to set the same style for all rows.	Function({row, rowIndex})/Object	-	-
cell-class-name	Callback for cell className. A string can also be used to set a fixed className for all cells.	Function({row, column, rowIndex, columnIndex})/String	-	-
cell-style	Callback for cell style. A fixed object can also be used to set the same style for all cells.	Function({row, column, rowIndex, columnIndex})/Object	-	-
header-row-class-name	Callback for header row className. A string can also be used to set a fixed className for all header rows.	Function({row, rowIndex})/String	-	-
header-row-style	Callback for header row style. A fixed object can also be used to set the same style for all header rows.	Function({row, rowIndex})/Object	-	-
header-cell-class-name	Callback for header cell className. A string can also be used to set a fixed className for all header cells.	Function({row, column, rowIndex, columnIndex})/String	-	-
header-cell-style	Callback for header cell style. A fixed object can also be used to set the same style for all header cells.	Function({row, column, rowIndex, columnIndex})/Object	-	-
row-key	Key of row data, used to optimize Table rendering. This property is required when using reserve-selection or displaying tree data. When the type is String, multi-level access is supported, such as user.info.id, but user.info[0].id is not supported; use Function for that case.	Function(row)/String	-	-
empty-text	Text displayed when data is empty; can also be set through slot="empty"	String	-	No data
default-expand-all	Whether to expand all rows by default; enabled when Table has expandable rows or is a tree table	Boolean	-	false
expand-row-keys	Use this property to set the currently expanded rows of Table. row-key must be set to use it. This property is an array of expanded row keys.	Array	-
default-sort	Default sort column prop and order. Its prop property specifies the default sort column, and order specifies the default sort order	Object	order: ascending, descending	If only prop is specified and order is not specified, the default order is ascending
tooltip-effect	tooltip effect Property	String	dark/light
show-summary	Whether to show a summary row at the table footer	Boolean	-	false
sum-text	Text of the first column in the summary row	String	-	Total
summary-method	Custom summary calculation method	Function({ columns, data })	-	-
span-method	Calculation method for merging rows or columns	Function({ row, column, rowIndex, columnIndex })	-	-
select-on-indeterminate	In a multiple-selection Table, behavior when the header checkbox is clicked while only some rows are selected. If true, all rows are selected; if false, all rows are deselected	Boolean	-	true
indent	Indent of tree nodes when displaying tree data	Number	-	16
lazy	Whether to lazy-load child node data	Boolean	-	-
load	Function for loading child node data. Takes effect when lazy is true. The second parameter of the function contains node level information	Function(row, treeNode, resolve)	-	-
tree-props	Configuration options for rendering nested data	Object	-

Table Events

Event Name	Description	Parameter
select	Triggered when the user manually checks the checkbox of a data row	selection, row
select-all	Triggered when the user manually checks the Select All checkbox	selection
selection-change	Triggered when the selection changes	selection
cell-mouse-enter	Triggered when hover enters a cell	row, column, cell, event
cell-mouse-leave	Triggered when hover leaves a cell	row, column, cell, event
cell-click	Triggered when a cell is clicked	row, column, cell, event
cell-dblclick	Triggered when a cell is double-clicked	row, column, cell, event
row-click	Triggered when a row is clicked	row, column, event
row-contextmenu	Triggered when a row is right-clicked	row, column, event
row-dblclick	Triggered when a row is double-clicked	row, column, event
header-click	Triggered when the header of a column is clicked	column, event
header-contextmenu	Triggered when the header of a column is right-clicked	column, event
sort-change	Triggered when Table sort conditions change
filter-change	Triggered when Table filter conditions change. The parameter value is an object whose key is the column columnKey and whose corresponding value is an array of filter conditions selected by the user.	filters
current-change	Triggered when the current row of Table changes. To highlight the current row, enable the highlight-current-row property of Table	currentRow, oldCurrentRow
header-dragend	Triggered when dragging the header changes column width	newWidth, oldWidth, column, event
expand-change	Triggered when the user expands or collapses a row (for expandable rows, the second callback parameter is expandedRows; for tree Table, the second parameter is expanded)	row, (expandedRows | expanded)

Table Methods

Method	Description	Parameters
clearSelection	For multiple-selection Table, clears user selection	-
toggleRowSelection	For multiple-selection Table, toggles the selected state of a row. If the second parameter is used, it sets whether the row is selected (selected true means selected)	row, selected
toggleAllSelection	For multiple-selection Table, toggles the selected state of all rows	-
toggleRowExpansion	For expandable Table and tree Table, toggles the expanded state of a row. If the second parameter is used, it sets whether the row is expanded (expanded true means expanded)	row, expanded
setCurrentRow	For single-selection Table, sets a row as the selected row. If called without a parameter, it cancels the selected state of the currently highlighted row.	row
clearSort	Clears sort conditions and restores data to the unsorted state	-
clearFilter	When no parameter is passed, clears all filter conditions and restores data to the unfiltered state. An array of columnKeys can also be passed to clear filters for specified columns	columnKey
doLayout	Recalculates Table layout. This method may need to be called when Table or its ancestor element changes from hidden to visible	-
sort	Manually sorts Table. The parameter prop property specifies the sort column, and order specifies the sort order.	prop: string, order: string

Table Slot

name	Description
append	Content inserted after the last row of Table. This slot may be needed for infinite scrolling actions on Table content. If Table has a summary row, this slot is placed above the summary row.

Table-column Attributes

Parameter	Description	Type	Optional Values	Default
type	Type of the corresponding column. If set to selection, Checkbox is displayed; if set to index, the row index is displayed (starting from 1); if set to expand, an expandable button is displayed	string	selection/index/expand	-
index	If type=index is set, the index can be customized by passing the index property	number, Function(index)	-	-
column-key	Key of column. If the filter-change event is used, this property is required to identify which column the filter condition belongs to	string	-	-
label	Displayed title	string	-	-
prop	Field name corresponding to column content; the property property can also be used	string	-	-
width	Width of the corresponding column	string	-	-
min-width	Minimum width of the corresponding column. Unlike width, which is fixed, min-width allocates the remaining width proportionally to columns with min-width set	string	-	-
fixed	Whether the column is fixed on the left or right. true means fixed on the left	string, boolean	true, left, right	-
render-header	Function used to render the column title label area	Function(h, { column, $index })	-	-
sortable	Whether the corresponding column can be sorted. If set to 'custom', remote sorting is intended, and the Table sort-change event must be listened to	boolean, string	true, false, 'custom'	false
sort-method	Method used to sort data. Only enabled when sortable is true. It must return a number and behaves consistently with Array.sort	Function(a, b)	-	-
sort-by	Specifies which property data is sorted by. Only enabled when sortable is true and sort-method is not set. If sort-by is an array, sorting is first done by the first property; if equal, by the second property, and so on	String/Array/Function(row, index)	-	-
sort-orders	Rotation order of sorting strategies used when sorting data. Only enabled when sortable is true. Pass an array; as the user clicks the header, the column is sorted in the order of array elements	array	Array elements must be one of the following: ascending for ascending order, descending for descending order, and null to restore the original order	['ascending', 'descending', null]
resizable	Whether the corresponding column width can be changed by dragging (requires the border property on el-table to be true)	boolean	-	true
formatter	Used to format content	Function(row, column, cellValue, index)	-	-
show-overflow-tooltip	Shows tooltip when content is too long and hidden	Boolean	-	false
align	Alignment	String	left/center/right	left
header-align	Header alignment. If not set, Table alignment is used	String	left/center/right	-
class-name	Column className	string	-	-
label-class-name	Custom class name of the current column title	string	-	-
selectable	Only enabled for type=selection columns. Type is Function, and the return value determines whether the checkbox of this row can be checked	Function(row, index)	-	-
reserve-selection	Only enabled for type=selection columns. Type is Boolean. If true, previously selected data is retained after data updates (row-key must be specified)	Boolean	-	false
filters	Options for data filtering, in array format. Elements in the array must have text and value properties.	Array[{ text, value }]	-	-
filter-placement	Placement of the filter Popover	String	Same as the Tooltip placement property	-
filter-multiple	Whether data filter options support multiple selection	Boolean	-	true
filter-method	Method used for data filtering. If there are multiple filter options, it runs multiple times for each data item, and the item is displayed if any call returns true.	Function(value, row, column)	-	-
filtered-value	Selected data filter items. This property may be needed if you need to customize the rendering of header filters.	Array	-	-

Table-column Scoped Slot

name	Description
-	Custom column content. Parameter is
header	Custom header content. Parameter is

Basic Table

Basic table display usage.

  <template>
    <fx-table
      :data="tableData"
      style="width: 100%">
      <fx-table-column
        prop="date"
        label="Date"
        width="180">
      </fx-table-column>
      <fx-table-column
        prop="name"
        label="Name"
        width="180">
      </fx-table-column>
      <fx-table-column
        prop="address"
        label="Address">
      </fx-table-column>
      <fx-table-column>
        <template slot="header" slot-scope="scope">Actions <fx-tooltip effect="light" content="Top Right Tip Text" placement="top-end">
            <i class="el-icon-question"></i>
          </fx-tooltip>
        </template>
      </fx-table-column>
    </fx-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: 'Wang Xiaohu',
            address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
          }, {
            date: '2016-05-04',
            name: 'Wang Xiaohu',
            address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
          }, {
            date: '2016-05-01',
            name: 'Wang Xiaohu',
            address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
          }, {
            date: '2016-05-03',
            name: 'Wang Xiaohu',
            address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
          }]
        }
      }
    }
  </script>

Table with Zebra Stripes

Using a table with zebra stripes makes it easier to distinguish data in different rows.

<template>
  <fx-table
    :data="tableData"
    stripe
    style="width: 100%">
    <fx-table-column
      prop="date"
      label="Date"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address">
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    }
  }
</script>

Table with Border

<template>
  <fx-table
    :data="tableData"
    border
    style="width: 100%">
    <fx-table-column
      prop="date"
      label="Date"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address">
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    }
  }
</script>

Table with Status

Table content can be highlighted to distinguish statuses such as success, info, warning, and danger.

<template>
  <fx-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName">
    <fx-table-column
      prop="date"
      label="Date"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address">
    </fx-table-column>
  </fx-table>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>

<script>
  export default {
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    }
  }
</script>

Fixed Header

Use a fixed header when there is too much vertical content.

<template>
  <fx-table
    ref="table"
    :data="tableData"
    height="250"
    border
    style="width: 100%">
    <fx-table-column
      prop="date"
      label="Date"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address">
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    },
    created(){
      setTimeout(()=>{
        this.tableData.push(...[{
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }])

        this.$nextTick(()=>{
          this.$refs?.table?.doLayout();
        })
      },5000)
    }
  }
</script>

Fixed Column

Use fixed columns when there is too much horizontal content.

<template>
  <fx-table
    :data="tableData"
    border
    style="width: 100%">
    <fx-table-column
      fixed
      prop="date"
      label="Date"
      width="150">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="province"
      label="Province"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="city"
      label="City"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address"
      width="300">
    </fx-table-column>
    <fx-table-column
      prop="zip"
      label="ZIP Code"
      width="120">
    </fx-table-column>
    <fx-table-column
      fixed="right"
      label="Actions"
      width="100">
      <template slot-scope="scope">
        <fx-button @click="handleClick(scope.row)" type="text" size="small">View</fx-button>
        <fx-button type="text" size="small">Edit</fx-button>
      </template>
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    methods: {
      handleClick(row) {
        console.log(row);
      }
    },

    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }]
      }
    }
  }
</script>

Fixed Columns and Header

Use fixed columns and header when there is too much horizontal and vertical content.

<template>
  <fx-table
    :data="tableData"
    style="width: 100%"
    height="250">
    <fx-table-column
      fixed
      prop="date"
      label="Date"
      width="150">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="province"
      label="Province"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="city"
      label="City"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address"
      width="300">
    </fx-table-column>
    <fx-table-column
      prop="zip"
      label="ZIP Code"
      width="120">
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }]
      }
    }
  }
</script>

Fluid Height

When the data volume changes dynamically, you can set a maximum height for Table.

<template>
  <fx-table
    :data="tableData"
    style="width: 100%"
    height="250">
    <fx-table-column
      fixed
      prop="date"
      label="Date"
      width="150">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="province"
      label="Province"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="city"
      label="City"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address"
      width="300">
    </fx-table-column>
    <fx-table-column
      prop="zip"
      label="ZIP Code"
      width="120">
    </fx-table-column>
    <fx-table-column
      label="Actions"
      width="120">
      <template slot-scope="scope">
        <fx-button
          @click.native.prevent="deleteRow(scope.$index, tableData)"
          type="text"
          size="small">
          Remove
        </fx-button>
      </template>
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }]
      }
    }
  }
</script>

Multi-Level Header

When the data structure is complex, use multi-level headers to show data hierarchy.

<template>
  <fx-table
    :data="tableData"
    style="width: 100%">
    <fx-table-column label="Delivery Info">
      <fx-table-column
        prop="name"
        label="Name"
        width="120">
      </fx-table-column>
      <fx-table-column label="Address">
        <fx-table-column
          prop="province"
          label="Province"
          width="120">
        </fx-table-column>
        <fx-table-column
          prop="city"
          label="City"
          width="120">
        </fx-table-column>
        <fx-table-column
          prop="address"
          label="Address"
          width="300">
        </fx-table-column>
        <fx-table-column
          prop="zip"
          label="ZIP Code"
          width="120">
        </fx-table-column>
      </fx-table-column>
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333
        }]
      }
    }
  }
</script>

Single Selection

Use a color block to indicate selected single-row data.

<template>
  <fx-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    @current-change="handleCurrentChange"
    style="width: 100%">
    <fx-table-column
      type="index"
      width="50">
    </fx-table-column>
    <fx-table-column
      property="date"
      label="Date"
      width="120">
    </fx-table-column>
    <fx-table-column
      property="name"
      label="Name"
      width="120">
    </fx-table-column>
    <fx-table-column
      property="address"
      label="Address">
    </fx-table-column>
  </fx-table>
  <div style="margin-top: 20px">
    <fx-button @click="setCurrent(tableData[1])">Select second row</fx-button>
    <fx-button @click="setCurrent()">Cancel selection</fx-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }],
        currentRow: null
      }
    },

    methods: {
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      }
    }
  }
</script>

Multiple Selection

Use Checkbox when selecting multiple rows of data.

<template>
  <fx-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <fx-table-column
      type="selection"
      width="55">
    </fx-table-column>
    <fx-table-column
      label="Date"
      width="120">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="120">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address"
      show-overflow-tooltip>
    </fx-table-column>
  </fx-table>
  <div style="margin-top: 20px">
    <fx-button @click="toggleSelection([tableData[1], tableData[2]])">Toggle selected state of the second and third rows</fx-button>
    <fx-button @click="toggleSelection()">Cancel selection</fx-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-08',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-06',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-07',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }],
        multipleSelection: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

Sorting

Sort Table to quickly find or compare data.

<template>
  <fx-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}"
    >
    <fx-table-column
      prop="date"
      label="Date"
      sortable
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      sortable
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address"
      :formatter="formatter">
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }
  }
</script>

Filtering

Filter Table to quickly find the data you want.

<template>
  <fx-button @click="resetDateFilter">Clear date filter</fx-button>
  <fx-button @click="clearFilter">Clear all filters</fx-button>
  <fx-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%">
    <fx-table-column
      prop="date"
      label="Date"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address"
      :formatter="formatter">
    </fx-table-column>
    <fx-table-column
      prop="tag"
      label="Label"
      width="100"
      :filters="[{ text: 'Home', value: 'Home' }, { text: 'Company', value: 'Company' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <fx-tag
          :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.tag}}</fx-tag>
      </template>
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          tag: 'Home'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai',
          tag: 'Company'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai',
          tag: 'Home'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai',
          tag: 'Company'
        }]
      }
    },
    methods: {
      resetDateFilter() {
        this.$refs.filterTable.clearFilter('date');
      },
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row, column) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      }
    }
  }
</script>

Custom Column Template

Customize displayed column content and combine it with other components.

<template>
  <fx-table
    :data="tableData"
    style="width: 100%">
    <fx-table-column
      label="Date"
      rowspan="10"
      width="180">
      <!-- <span class="cls">{{'aaa'}}</span> -->
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </fx-table-column>
    <fx-table-column
      label="Name"
      width="180">
      <template slot-scope="scope">
        <fx-popover trigger="hover" placement="top">
          <p>Name: {{ scope.row.name }}</p>
          <p>Address: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <fx-tag size="medium">{{ scope.row.name }}</fx-tag>
          </div>
        </fx-popover>
      </template>
    </fx-table-column>
    <fx-table-column label="Actions">
      <template slot-scope="scope">
        <fx-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</fx-button>
        <fx-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</fx-button>
      </template>
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

Expandable Row

When row content is too large and you do not want to show a horizontal scrollbar, use Table expandable rows.

<template>
  <fx-table
    :data="tableData"
    style="width: 100%">
    <fx-table-column type="expand">
      <template slot-scope="props">
        <fx-form label-position="left" inline class="demo-table-expand">
          <fx-form-item label="Product Name">
            <span>{{ props.row.name }}</span>
          </fx-form-item>
          <fx-form-item label="Store">
            <span>{{ props.row.shop }}</span>
          </fx-form-item>
          <fx-form-item label="Product ID">
            <span>{{ props.row.id }}</span>
          </fx-form-item>
          <fx-form-item label="Store ID">
            <span>{{ props.row.shopId }}</span>
          </fx-form-item>
          <fx-form-item label="Product Category">
            <span>{{ props.row.category }}</span>
          </fx-form-item>
          <fx-form-item label="Store Address">
            <span>{{ props.row.address }}</span>
          </fx-form-item>
          <fx-form-item label="Product Description">
            <span>{{ props.row.desc }}</span>
          </fx-form-item>
        </fx-form>
      </template>
    </fx-table-column>
    <fx-table-column
      label="Product ID"
      prop="id">
    </fx-table-column>
    <fx-table-column
      label="Product Name"
      prop="name">
    </fx-table-column>
    <fx-table-column
      label="Description"
      prop="desc">
    </fx-table-column>
  </fx-table>
</template>

<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: 'Tasty Egg Waffles',
          category: 'Jiangsu-Zhejiang Snacks, Snacks',
          desc: 'premium Dutch evaporated milk, rich milky flavor without being greasy',
          address: 'Zhenbei Road, Putuo District, Shanghai',
          shop: 'Wang Xiaohufamily-run shop',
          shopId: '10333'
        }, {
          id: '12987123',
          name: 'Tasty Egg Waffles',
          category: 'Jiangsu-Zhejiang Snacks, Snacks',
          desc: 'premium Dutch evaporated milk, rich milky flavor without being greasy',
          address: 'Zhenbei Road, Putuo District, Shanghai',
          shop: 'Wang Xiaohufamily-run shop',
          shopId: '10333'
        }, {
          id: '12987125',
          name: 'Tasty Egg Waffles',
          category: 'Jiangsu-Zhejiang Snacks, Snacks',
          desc: 'premium Dutch evaporated milk, rich milky flavor without being greasy',
          address: 'Zhenbei Road, Putuo District, Shanghai',
          shop: 'Wang Xiaohufamily-run shop',
          shopId: '10333'
        }, {
          id: '12987126',
          name: 'Tasty Egg Waffles',
          category: 'Jiangsu-Zhejiang Snacks, Snacks',
          desc: 'premium Dutch evaporated milk, rich milky flavor without being greasy',
          address: 'Zhenbei Road, Putuo District, Shanghai',
          shop: 'Wang Xiaohufamily-run shop',
          shopId: '10333'
        }]
      }
    }
  }
</script>

Tree Data and Lazy Loading

<template>
<div>
  <fx-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <fx-table-column
      prop="date"
      label="Date"
      sortable
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      sortable
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address">
    </fx-table-column>
  </fx-table>

  <fx-table
    :data="tableData1"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <fx-table-column
      prop="date"
      label="Date"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address">
    </fx-table-column>
  </fx-table>
</div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          id: 1,
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: 'Wang Xiaohu',
              address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
            }, {
              id: 32,
              date: '2016-05-01',
              name: 'Wang Xiaohu',
              address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: 'Wang Xiaohu',
              address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
            }, {
              id: 32,
              date: '2016-05-01',
              name: 'Wang Xiaohu',
              address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
            }
          ])
        }, 1000)
      }
    },
  }
</script>

Custom Header

Headers can be customized.

<template>
  <fx-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width: 100%">
    <fx-table-column
      label="Date"
      prop="date">
    </fx-table-column>
    <fx-table-column
      label="Name"
      prop="name">
    </fx-table-column>
    <fx-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <fx-input
          v-model="search"
          size="mini"
          placeholder="Enter keyword to search"/>
      </template>
      <template slot-scope="scope">
        <fx-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</fx-button>
        <fx-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</fx-button>
      </template>
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }],
        search: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>

Footer Summary Row

If Table displays various numbers, totals for each column can be shown in the footer.

<template>
  <fx-table
    :data="tableData"
    border
    show-summary
    style="width: 100%">
    <fx-table-column
      prop="id"
      label="ID"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name">
    </fx-table-column>
    <fx-table-column
      prop="amount1"
      sortable
      label="Value 1">
    </fx-table-column>
    <fx-table-column
      prop="amount2"
      sortable
      label="Value 2">
    </fx-table-column>
    <fx-table-column
      prop="amount3"
      sortable
      label="Value 3">
    </fx-table-column>
  </fx-table>

  <fx-table
    :data="tableData"
    border
    height="200"
    :summary-method="getSummaries"
    show-summary
    style="width: 100%; margin-top: 20px">
    <fx-table-column
      prop="id"
      label="ID"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name">
    </fx-table-column>
    <fx-table-column
      prop="amount1"
      label="Value 1 (Yuan)">
    </fx-table-column>
    <fx-table-column
      prop="amount2"
      label="Value 2 (Yuan)">
    </fx-table-column>
    <fx-table-column
      prop="amount3"
      label="Value 3 (Yuan)">
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: 'Wang Xiaohu',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: 'Wang Xiaohu',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: 'Wang Xiaohu',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: 'Wang Xiaohu',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: 'Wang Xiaohu',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = 'Total Price';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += ' yuan';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    }
  };
</script>

Merge Rows or Columns

When multiple rows or columns share one data item, rows or columns can be merged.

<template>
  <div>
    <fx-table
      :data="tableData"
      :span-method="arraySpanMethod"
      border
      style="width: 100%">
      <fx-table-column
        prop="id"
        label="ID"
        width="180">
      </fx-table-column>
      <fx-table-column
        prop="name"
        label="Name">
      </fx-table-column>
      <fx-table-column
        prop="amount1"
        sortable
        label="Value 1">
      </fx-table-column>
      <fx-table-column
        prop="amount2"
        sortable
        label="Value 2">
      </fx-table-column>
      <fx-table-column
        prop="amount3"
        sortable
        label="Value 3">
      </fx-table-column>
    </fx-table>

    <fx-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px">
      <fx-table-column
        prop="id"
        label="ID"
        width="180">
      </fx-table-column>
      <fx-table-column
        prop="name"
        label="Name">
      </fx-table-column>
      <fx-table-column
        prop="amount1"
        label="Value 1 (Yuan)">
      </fx-table-column>
      <fx-table-column
        prop="amount2"
        label="Value 2 (Yuan)">
      </fx-table-column>
      <fx-table-column
        prop="amount3"
        label="Value 3 (Yuan)">
      </fx-table-column>
    </fx-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: 'Wang Xiaohu',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: 'Wang Xiaohu',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: 'Wang Xiaohu',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: 'Wang Xiaohu',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: 'Wang Xiaohu',
          amount1: '539',
          amount2: '4.1',
          amount3: 15
        }]
      };
    },
    methods: {
      arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (rowIndex % 2 === 0) {
          if (columnIndex === 0) {
            return [1, 2];
          } else if (columnIndex === 1) {
            return [0, 0];
          }
        }
      },

      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 0) {
          if (rowIndex % 2 === 0) {
            return {
              rowspan: 2,
              colspan: 1
            };
          } else {
            return {
              rowspan: 0,
              colspan: 0
            };
          }
        }
      }
    }
  };
</script>

Custom Index

Customize row numbers for type=index columns.

<template>
  <fx-table
    :data="tableData"
    style="width: 100%">
    <fx-table-column
      type="index"
      :index="indexMethod">
    </fx-table-column>
    <fx-table-column
      prop="date"
      label="Date"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="name"
      label="Name"
      width="180">
    </fx-table-column>
    <fx-table-column
      prop="address"
      label="Address">
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333,
          tag: 'Home'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333,
          tag: 'Company'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333,
          tag: 'Home'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai',
          zip: 200333,
          tag: 'Company'
        }],
      }
    },
    methods: {
      indexMethod(index) {
        return index * 2;
      }
    }
  };
</script>