Fxiaoke Developer Manual
Table of Contents

Table

# FxTable

Used to display multiple sets of structured data with sorting, filtering, comparison or other custom operations.

# Table Attributes

Attribute Description Type Options Default
data Table data array — —
height Table's height. Accepts a number (unit: px) or string (will be set as style.height) string/number — —
max-height Table's max-height. Accepts number (unit: px) or string string/number — —
stripe Whether table is striped boolean — false
border Whether table has vertical border boolean — false
size Table size string medium / small / mini —
fit Whether column width fits container boolean — true
show-header Whether table header is visible boolean — true
highlight-current-row Whether current row is highlighted boolean — false
current-row-key Key of current row (write-only) String,Number — —
row-class-name Function that returns custom class names for a row, or assign a string to set same class name for all rows Function({row, rowIndex})/String — —
row-style Function that returns custom style for a row, or assign an object to set same style for all rows Function({row, rowIndex})/Object — —
cell-class-name Function that returns custom class names for a cell, or assign a string to set same class name for all cells Function({row, column, rowIndex, columnIndex})/String — —
cell-style Function that returns custom style for a cell, or assign an object to set same style for all cells Function({row, column, rowIndex, columnIndex})/Object — —
header-row-class-name Function that returns custom class names for a header row, or assign a string to set same class name for all header rows Function({row, rowIndex})/String — —
header-row-style Function that returns custom style for a header row, or assign an object to set same style for all header rows Function({row, rowIndex})/Object — —
header-cell-class-name Function that returns custom class names for a header cell, or assign a string to set same class name for all header cells Function({row, column, rowIndex, columnIndex})/String — —
header-cell-style Function that returns custom style for a header cell, or assign an object to set same style for all header cells Function({row, column, rowIndex, columnIndex})/Object — —
row-key Key of row data, used for optimizing rendering. Required when using reserve-selection or displaying tree data. When type is String, supports multi-level access like user.info.id, but not user.info[0].id (use Function instead) Function(row)/String — —
empty-text Text displayed when data is empty. Can also be set via slot="empty" String — No Data
default-expand-all Whether expand all rows by default (works when table has expandable rows or is tree table) Boolean — false
expand-row-keys Set currently expanded rows (requires row-key). Value is an array of row keys Array —
default-sort Default sort column and order. prop specifies default sorted column, order specifies sort order Object order: ascending, descending If only prop is specified, default order is ascending
tooltip-effect Tooltip's effect property String dark/light dark
show-summary Whether to display summary row Boolean — false
sum-text Text of first column in summary row String — Sum
summary-method Custom summary method Function({ columns, data }) — —
span-method Method that returns merge cell config Function({ row, column, rowIndex, columnIndex }) — —
select-on-indeterminate In multiple selection table, controls behavior when only some rows are selected and checkbox in header is clicked. If true, selects all rows; if false, deselects all Boolean — true
indent Indent of tree node when displaying tree data Number — 16
lazy Whether to lazy load child node data Boolean — —
load Method for loading child node data (works when lazy is true). Second parameter contains node level info Function(row, treeNode, resolve) — —
tree-props Configuration for rendering nested data Object — { hasChildren: 'hasChildren', children: 'children' }

# Table Events

Event Name Description Parameters
select Triggered when user manually selects a row selection, row
select-all Triggered when user manually selects all rows selection
selection-change Triggered when selection changes selection
cell-mouse-enter Triggered when mouse enters a cell row, column, cell, event
cell-mouse-leave Triggered when mouse leaves a cell row, column, cell, event
cell-click Triggered when cell is clicked row, column, cell, event
cell-dblclick Triggered when cell is double-clicked row, column, cell, event
row-click Triggered when row is clicked row, column, event
row-contextmenu Triggered when row is right-clicked row, column, event
row-dblclick Triggered when row is double-clicked row, column, event
header-click Triggered when header is clicked column, event
header-contextmenu Triggered when header is right-clicked column, event
sort-change Triggered when sorting changes { column, prop, order }
filter-change Triggered when filtering changes. Parameter is an object where key is column's columnKey and value is array of selected filter conditions filters
current-change Triggered when current row changes currentRow, oldCurrentRow
header-dragend Triggered when column width changes by dragging header newWidth, oldWidth, column, event
expand-change Triggered when row expand status changes (second parameter is expandedRows when expanding, or expanded for tree table) row, (expandedRows | expanded)

# Table Methods

Method Description Parameters
clearSelection For multiple selection table, clear selection —
toggleRowSelection For multiple selection table, toggle row selection status. Second parameter sets selection status (true for selected) row, selected
toggleAllSelection For multiple selection table, toggle selection status of all rows -
toggleRowExpansion For expandable table or tree table, toggle row expansion status. Second parameter sets expansion status (true for expanded) row, expanded
setCurrentRow For single selection table, set current row. If no parameter, clears current selection row
clearSort Clear sorting, data returns to unsorted state —
clearFilter Clear all filters when no parameter, or clear specified column filters when passing array of columnKeys columnKey
doLayout Re-layout table. May need to call when table or its ancestor element changes from hidden to visible —
sort Manually sort table. prop specifies column, order specifies sort order prop: string, order: string

# Table Slot

name Description
append Content inserted after last row. Useful for infinite scrolling. If table has summary row, this slot will be above it.

# Table-column Attributes

Attribute Description Type Options Default
type Column type. selection shows checkbox, index shows row index (starting from 1), expand shows expand button string selection/index/expand —
index Custom index when type=index. Can be number or function(index) number, Function(index) - -
column-key Column's key. Required when using filter-change event string — —
label Column label string — —
prop Field name for column content. Can also use property string — —
width Column width string — —
min-width Column's min-width. Unlike width which is fixed, min-width distributes remaining width proportionally to columns with min-width string — —
fixed Whether column is fixed to left or right. true means fixed to left string, boolean true, left, right —
render-header Function for rendering header label Function(h, { column, $index }) — —
sortable Whether column is sortable. 'custom' means remote sorting (listen to sort-change event) boolean, string true, false, 'custom' false
sort-method Custom sorting method (works when sortable is true). Should return number like Array.sort Function(a, b) — —
sort-by Specify sort property (works when sortable is true and no sort-method). If array, sorts by first property, then second if equal, etc. String/Array/Function(row, index) — —
sort-orders Sort order rotation when sortable is true. Array elements should be 'ascending', 'descending' or null (resets to original order) array ['ascending', 'descending', null] ['ascending', 'descending', null]
resizable Whether column width can be resized (requires border=true on el-table) boolean — true
formatter Function to format content Function(row, column, cellValue, index) — —
show-overflow-tooltip Show tooltip when content is too long Boolean — false
align Alignment String left/center/right left
header-align Header alignment. Inherits table alignment if not set String left/center/right —
class-name Column's class name string — —
label-class-name Custom class name for column label string — —
selectable Only works when type=selection. Function determines if row's checkbox can be selected Function(row, index) — —
reserve-selection Only works when type=selection. Whether to keep selection after data updates (requires row-key) Boolean — false
filters Filter options array. Elements should have text and value properties Array[{ text, value }] — —
filter-placement Placement of filter popup String Same as Tooltip's placement —
filter-multiple Whether filter is multiple selection Boolean — true
filter-method Filter method. For multiple filters, executes multiple times per row, shows if any returns true Function(value, row, column) — —
filtered-value Selected filter items. Useful when customizing header filter rendering Array — —

# Table-column Scoped Slot

name Description
— Custom column content. Parameters: { row, column, $index }
header Custom header content. Parameters: { column, $index }

# Basic Table

Basic table display.

When data array is passed to el-table, use prop in el-table-column to map to object keys, and label for column names. Use width to set column width.

  <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 tooltip" 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: 'John Smith',
            address: 'No.1518, Jinshajiang\n Road, Putuo District'
          }, {
            date: '2016-05-04',
            name: 'John Smith',
            address: 'No.1517, Jinshajiang Road, Putuo District'
          }, {
            date: '2016-05-01',
            name: 'John Smith',
            address: 'No.1519, Jinshajiang Road, Putuo District'
          }, {
            date: '2016-05-03',
            name: 'John Smith',
            address: 'No.1516, Jinshajiang Road, Putuo District'
          }]
        }
      }
    }
  </script>
Expand Copy

# Striped Table

Striped table makes it easier to distinguish different rows.

Set stripe property to create striped table. Accepts Boolean, default is false.

<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: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1517, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1519, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1516, Jinshajiang Road, Putuo District'
        }]
      }
    }
  }
</script>
Expand Copy

# Table with Border

By default, Table has no vertical border. Set border property to true to enable it.

<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: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1517, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1519, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1516, Jinshajiang Road, Putuo District'
        }]
      }
    }
  }
</script>
Expand Copy

# Table with Status

Highlight rows to distinguish different statuses like success, info, warning, danger.

Use row-class-name to add class to rows indicating their status.

<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: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District',
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District',
        }, {
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }]
      }
    }
  }
</script>
Expand Copy

# Fixed Header

Fix the header when scrolling through vertical content.

Set the height attribute on el-table to fix the header without additional code.

<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: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-02',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }]
      }
    },
    created(){
      setTimeout(()=>{
        this.tableData.push(...[{
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-08',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-06',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-07',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }])

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

# Fixed Column

Fix columns when scrolling through horizontal content.

Use the fixed attribute to fix columns. Accepts Boolean or left/right to specify left or right side.

<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"
      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: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1517, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1519, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1516, Jinshajiang Road, Putuo District',
          zip: 200333
        }]
      }
    }
  }
</script>
Expand Copy

# Fixed Columns and Header

Fix both columns and header when scrolling through horizontal and vertical content.

Simply set both properties to enable both fixed columns and header.

<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"
      width="120">
    </fx-table-column>
  </fx-table>
</template>

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

# Fluid Height

Set a max-height for the table when data volume changes dynamically.

Set the max-height attribute to specify max-height. If table height exceeds max-height, a scrollbar will appear.

<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"
      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: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }]
      }
    }
  }
</script>
Expand Copy

# Multi-level Header

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

Simply nest el-table-column inside el-table-column to create multi-level headers.

<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"
          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: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-02',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-08',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-06',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }, {
          date: '2016-05-07',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333
        }]
      }
    }
  }
</script>
Expand Copy

# Single Selection

Select single row indicated by color block.

Select 2nd Row Clear Selection

Table supports single selection. Set the highlight-current-row attribute to enable single selection. Use the current-change event to handle selection trigger, which passes currentRow and oldCurrentRow. To display row index, add an el-table-column with type set to index to display index starting from 1.

<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 2nd Row</fx-button>
    <fx-button @click="setCurrent()">Clear Selection</fx-button>
  </div>
</template>

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

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

# Multiple Selection

Select multiple rows with checkboxes.

Toggle 2nd & 3rd Row Selection Clear Selection

Multiple selection is simple: add an el-table-column with type set to selection. By default, content wraps if too long. Use show-overflow-tooltip for single-line display with tooltip on hover. Accepts a Boolean, when true, excess content shows as tooltip on hover.

<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 2nd & 3rd Row Selection</fx-button>
    <fx-button @click="toggleSelection()">Clear Selection</fx-button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-02',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-08',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-06',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-07',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }],
        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>
Expand Copy

# Sorting

Sort the table to quickly find or compare data.

Set sortable attribute on a column to enable sorting. Accepts a Boolean, default is false. Use default-sort to set default sort column and order. Use sort-method or sort-by for custom sorting rules. For backend sorting, set sortable to custom and listen to sort-change event on Table, which provides current sort field and order for API requests. In this example, we also use formatter attribute to format column values. It accepts a Function with row and column parameters for custom processing.

<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: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1517, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1519, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1516, Jinshajiang Road, Putuo District'
        }]
      }
    },
    methods: {
      formatter(row, column) {
        return row.address;
      }
    }
  }
</script>
Expand Copy

# Filtering

Filter the table to quickly find the data you want.

Clear Date Filter Clear All Filters

Set filters and filter-method attributes on a column to enable filtering. filters is an array, filter-method is a method that determines which data to display. It receives three parameters: value, row, and column.

<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="Tag"
      width="100"
      :filters="[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]"
      :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: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          tag: 'Home'
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1517, Jinshajiang Road, Putuo District',
          tag: 'Office'
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1519, Jinshajiang Road, Putuo District',
          tag: 'Home'
        }, {
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1516, Jinshajiang Road, Putuo District',
          tag: 'Office'
        }]
      }
    },
    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>
Expand Copy

# Custom Column Template

Customize column display content to combine with other components.

Use Scoped slot to access row, column, $index and store (table's internal state management) data. Refer to demo for usage.

<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: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1517, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1519, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1516, Jinshajiang Road, Putuo District'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>
Expand Copy

# Expandable Row

When row content is too much and you don't want horizontal scrollbar, use expandable row feature.

Set type="expand" and use Scoped slot to enable expandable rows. The el-table-column template will render as expanded row content. Expandable rows can access same attributes as custom column template Scoped slot.

<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="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="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: 'Egg Waffle',
          category: 'Snacks',
          desc: 'Premium Dutch milk, rich but not greasy',
          address: 'Zhenbei Road, Putuo District',
          shop: 'John Smith Store',
          shopId: '10333'
        }, {
          id: '12987123',
          name: 'Egg Waffle',
          category: 'Snacks',
          desc: 'Premium Dutch milk, rich but not greasy',
          address: 'Zhenbei Road, Putuo District',
          shop: 'John Smith Store',
          shopId: '10333'
        }, {
          id: '12987125',
          name: 'Egg Waffle',
          category: 'Snacks',
          desc: 'Premium Dutch milk, rich but not greasy',
          address: 'Zhenbei Road, Putuo District',
          shop: 'John Smith Store',
          shopId: '10333'
        }, {
          id: '12987126',
          name: 'Egg Waffle',
          category: 'Snacks',
          desc: 'Premium Dutch milk, rich but not greasy',
          address: 'Zhenbei Road, Putuo District',
          shop: 'John Smith Store',
          shopId: '10333'
        }]
      }
    }
  }
</script>
Expand Copy

# Tree Data and Lazy Loading

Supports displaying tree-type data. When row contains children field, it's treated as tree data. When rendering tree data, row-key must be specified. Supports async loading of child node data. Set Table's lazy property to true and provide load function. Specify which rows contain child nodes via hasChildren field in row. Both children and hasChildren can be configured via tree-props.

<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: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1517, Jinshajiang Road, Putuo District'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1519, Jinshajiang Road, Putuo District',
          children: [{
              id: 31,
              date: '2016-05-01',
              name: 'John Smith',
              address: 'No.1519, Jinshajiang Road, Putuo District'
            }, {
              id: 32,
              date: '2016-05-01',
              name: 'John Smith',
              address: 'No.1519, Jinshajiang Road, Putuo District'
          }]
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1516, Jinshajiang Road, Putuo District'
        }],
        tableData1: [{
          id: 1,
          date: '2016-05-02',
          name: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          id: 2,
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1517, Jinshajiang Road, Putuo District'
        }, {
          id: 3,
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1519, Jinshajiang Road, Putuo District',
          hasChildren: true
        }, {
          id: 4,
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1516, Jinshajiang Road, Putuo District'
        }]
      }
    },
    methods: {
      load(tree, treeNode, resolve) {
        setTimeout(() => {
          resolve([
            {
              id: 31,
              date: '2016-05-01',
              name: 'John Smith',
              address: 'No.1519, Jinshajiang Road, Putuo District'
            }, {
              id: 32,
              date: '2016-05-01',
              name: 'John Smith',
              address: 'No.1519, Jinshajiang Road, Putuo District'
            }
          ])
        }, 1000)
      }
    },
  }
</script>
Expand Copy

# Custom Header

Table header supports customization.

Customize header by setting Scoped slot (opens new window).

<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="Type 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: 'John Smith',
          address: 'No.1518, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          address: 'No.1517, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          address: 'No.1519, Jinshajiang Road, Putuo District'
        }, {
          date: '2016-05-03',
          name: 'John Smith',
          address: 'No.1516, Jinshajiang Road, Putuo District'
        }],
        search: ''
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>
Expand Copy

# Summary Row

Display summary row at the table footer for numerical data.

Set show-summary to true to display summary row at table footer. By default, for summary row, first column doesn't calculate sum but displays "Sum" text (configurable via sum-text), while remaining columns calculate sum of all values in the column. You can also define custom summary logic. Use summary-method and pass a method that returns an array, where each item displays in corresponding column of summary row. Refer to second table in this example.

<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="Amount 1">
    </fx-table-column>
    <fx-table-column
      prop="amount2"
      sortable
      label="Amount 2">
    </fx-table-column>
    <fx-table-column
      prop="amount3"
      sortable
      label="Amount 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="Amount 1 (USD)">
    </fx-table-column>
    <fx-table-column
      prop="amount2"
      label="Amount 2 (USD)">
    </fx-table-column>
    <fx-table-column
      prop="amount3"
      label="Amount 3 (USD)">
    </fx-table-column>
  </fx-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: 'John Smith',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: 'John Smith',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: 'John Smith',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: 'John Smith',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: 'John Smith',
          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';
            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] += ' USD';
          } else {
            sums[index] = 'N/A';
          }
        });

        return sums;
      }
    }
  };
</script>
Expand Copy

# Merge Cells

Merge rows or columns when multiple rows or columns share the same data.

Pass span-method to table to implement cell merging. The method receives an object parameter containing current row row, current column column, current row index rowIndex, and current column index columnIndex. The method should return an array with two elements: first element represents rowspan, second element represents colspan. Can also return an object with rowspan and colspan keys.

<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="Amount 1">
      </fx-table-column>
      <fx-table-column
        prop="amount2"
        sortable
        label="Amount 2">
      </fx-table-column>
      <fx-table-column
        prop="amount3"
        sortable
        label="Amount 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="Amount 1 (USD)">
      </fx-table-column>
      <fx-table-column
        prop="amount2"
        label="Amount 2 (USD)">
      </fx-table-column>
      <fx-table-column
        prop="amount3"
        label="Amount 3 (USD)">
      </fx-table-column>
    </fx-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          id: '12987122',
          name: 'John Smith',
          amount1: '234',
          amount2: '3.2',
          amount3: 10
        }, {
          id: '12987123',
          name: 'John Smith',
          amount1: '165',
          amount2: '4.43',
          amount3: 12
        }, {
          id: '12987124',
          name: 'John Smith',
          amount1: '324',
          amount2: '1.9',
          amount3: 9
        }, {
          id: '12987125',
          name: 'John Smith',
          amount1: '621',
          amount2: '2.2',
          amount3: 17
        }, {
          id: '12987126',
          name: 'John Smith',
          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>
Expand Copy

# Custom Index

Customize row numbers for type=index column.

Pass index attribute to type=index column to customize index. When passing a number, it will be the starting index. Can also pass a method that receives current row number (starting from 0) as parameter, and its return value will be displayed as index.

<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: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1518, Jinshajiang Road, Putuo District',
          zip: 200333,
          tag: 'Home'
        }, {
          date: '2016-05-04',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1517, Jinshajiang Road, Putuo District',
          zip: 200333,
          tag: 'Office'
        }, {
          date: '2016-05-01',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1519, Jinshajiang Road, Putuo District',
          zip: 200333,
          tag: 'Home'
        }, {
          date: '2016-05-03',
          name: 'John Smith',
          province: 'Shanghai',
          city: 'Putuo District',
          address: 'No.1516, Jinshajiang Road, Putuo District',
          zip: 200333,
          tag: 'Office'
        }],
      }
    },
    methods: {
      indexMethod(index) {
        return index * 2;
      }
    }
  };
</script>
Expand Copy
Color Picker
Tag

← Tag→