022_Table表格

1. Table表格例子

1.1. Table表格用于展示多条结构类似的数据, 可对数据进行排序、筛选、对比或其他自定义操作。

1.2. Table Attributes

参数	说明	类型	可选值	默认值
data	显示的数据	array	无	无
height	Table的高度, 默认为自动高度。如果height为number类型, 单位px; 如果height为string类型, 则这个高度会设置为Table的style.height的值, Table的高度会受控于外部样式。	string/number	无	无
max-height	Table的最大高度。合法的值为数字或者单位为px的高度。	string/number	无	无
stripe	是否为斑马纹table	boolean	无	false
border	是否带有纵向边框	boolean	无	false
size	Table的尺寸	string	medium / small / mini	无
fit	列的宽度是否自撑开	boolean	无	true
show-header	是否显示表头	boolean	无	false
highlight-current-row	是否要高亮当前行	boolean	无	false
current-row-key	当前行的key, 只写属性	String,Number	无	无
row-class-name	行的className的回调方法, 也可以使用字符串为所有行设置一个固定的className。	Function({row, rowIndex})/String	无	无
row-style	行的style的回调方法, 也可以使用一个固定的Object为所有行设置一样的Style。	Function({row, rowIndex})/Object	无	无
cell-class-name	单元格的className的回调方法, 也可以使用字符串为所有单元格设置一个固定的className。	Function({row, column, rowIndex, columnIndex})/String	无	无
cell-style	单元格的style的回调方法, 也可以使用一个固定的Object为所有单元格设置一样的Style。	Function({row, column, rowIndex, columnIndex})/Object	无	无
header-row-class-name	表头行的className的回调方法, 也可以使用字符串为所有表头行设置一个固定的className。	Function({row, rowIndex})/String	无	无
header-row-style	表头行的style的回调方法, 也可以使用一个固定的Object为所有表头行设置一样的Style。	Function({row, rowIndex})/Object	无	无
header-cell-class-name	表头单元格的className的回调方法, 也可以使用字符串为所有表头单元格设置一个固定的className。	Function({row, column, rowIndex, columnIndex})/String	无	无
header-cell-style	表头单元格的style的回调方法, 也可以使用一个固定的Object为所有表头单元格设置一样的Style。	Function({row, column, rowIndex, columnIndex})/Object	无	无
row-key	行数据的Key, 用来优化Table的渲染; 在使用reserve-selection功能与显示树形数据时, 该属性是必填的。类型为String时, 支持多层访问: user.info.id, 但不支持user.info[0].id, 此种情况请使用Function。	Function(row)/String	无	无
empty-text	空数据时显示的文本内容, 也可以通过slot="empty"设置	String	无	暂无数据
default-expand-all	是否默认展开所有行, 当Table包含展开行存在或者为树形表格时有效	Boolean	无	false
expand-row-keys	可以通过该属性设置Table目前的展开行, 需要设置row-key属性才能使用, 该属性为展开行的keys数组。	Array	无	无
default-sort	默认的排序列的prop和顺序。它的prop属性指定默认的排序的列, order指定默认排序的顺序	Object	order: ascending, descending	如果只指定了prop, 没有指定order, 则默认顺序是ascending
tooltip-effect	tooltipeffect属性	String	dark/light	无
show-summary	是否在表尾显示合计行	Boolean	无	false
sum-text	合计行第一列的文本	String	无	合计
summary-method	自定义的合计计算方法	Function({ columns, data })	无	无
span-method	合并行或列的计算方法	Function({ row, column, rowIndex, columnIndex })	无	无
select-on-indeterminate	在多选表格中, 当仅有部分行被选中时, 点击表头的多选框时的行为。若为true, 则选中所有行; 若为false, 则取消选择所有行	Boolean	无	true
indent	展示树形数据时, 树节点的缩进	Number	无	16
lazy	是否懒加载子节点数据	Boolean	无	无
load	加载子节点数据的函数, lazy为true时生效, 函数第二个参数包含了节点的层级信息	Function(row, treeNode, resolve)	无	无
tree-props	渲染嵌套数据的配置选项	Object	无	{ hasChildren: 'hasChildren', children: 'children' }

1.3. Table Events

事件名	说明	参数
select	当用户手动勾选数据行的Checkbox时触发的事件	selection, row
select-all	当用户手动勾选全选Checkbox时触发的事件	selection
selection-change	当选择项发生变化时会触发该事件	selection
cell-mouse-enter	当单元格hover进入时会触发该事件	row, column, cell, event
cell-mouse-leave	当单元格hover退出时会触发该事件	row, column, cell, event
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
cell-dblclick	当某个单元格被双击击时会触发该事件	row, column, cell, event
row-click	当某一行被点击时会触发该事件	row, column, event
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	row, column, event
row-dblclick	当某一行被双击时会触发该事件	row, column, event
header-click	当某一列的表头被点击时会触发该事件	column, event
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	column, event
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
filter-change	当表格的筛选条件发生变化的时候会触发该事件, 参数的值是一个对象, 对象的key是column的columnKey, 对应的value为用户选择的筛选条件的数组。	filters
current-change	当表格的当前行发生变化的时候会触发该事件, 如果要高亮当前行, 请打开表格的highlight-current-row属性	currentRow, oldCurrentRow
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event
expand-change	当用户对某一行展开或者关闭的时候会触发该事件(展开行时, 回调的第二个参数为expandedRows; 树形表格时第二参数为expanded)	row, (expandedRows \| expanded)

1.4. Table Methods

方法名	说明	参数
clearSelection	用于多选表格, 清空用户的选择	无
toggleRowSelection	用于多选表格, 切换某一行的选中状态, 如果使用了第二个参数, 则是设置这一行选中与否(selected为true则选中)	row, selected
toggleAllSelection	用于多选表格, 切换所有行的选中状态	无
toggleRowExpansion	用于可展开表格与树形表格, 切换某一行的展开状态, 如果使用了第二个参数, 则是设置这一行展开与否(expanded为true则展开)	row, expanded
setCurrentRow	用于单选表格, 设定某一行为选中行, 如果调用时不加参数, 则会取消目前高亮行的选中状态。	row
clearSort	用于清空排序条件, 数据会恢复成未排序的状态	无
clearFilter	不传入参数时用于清空所有过滤条件, 数据会恢复成未过滤的状态, 也可传入由columnKey组成的数组以清除指定列的过滤条件	columnKey
doLayout	对Table进行重新布局。当Table或其祖先元素由隐藏切换为显示时, 可能需要调用此方法	无
sort	手动对Table进行排序。参数prop属性指定排序列, order指定排序顺序。	prop: string, order: string

1.5. Table Slot

name	说明
append	插入至表格最后一行之后的内容, 如果需要对表格的内容进行无限滚动操作, 可能需要用到这个slot。若表格有合计行, 该slot会位于合计行之上。

1.6. Table-column Attributes

参数	说明	类型	可选值	默认值
type	对应列的类型。如果设置了selection则显示多选框; 如果设置了index则显示该行的索引(从1开始计算); 如果设置了expand则显示为一个可展开的按钮	string	selection/index/expand	无
index	如果设置了type=index, 可以通过传递index属性来自定义索引	number, Function(index)	无	无
column-key	column的key, 如果需要使用filter-change事件, 则需要此属性标识是哪个column的筛选条件	string	无	无
label	显示的标题	string	无	无
prop	对应列内容的字段名, 也可以使用property属性	string	无	无
width	对应列的宽度	string	无	无
min-width	对应列的最小宽度, 与width的区别是width是固定的, min-width会把剩余宽度按比例分配给设置了min-width的列	string	无	无
fixed	列是否固定在左侧或者右侧, true表示固定在左侧	string, boolean	true, left, right	无
render-header	列标题Label区域渲染使用的Function	Function(h, { column, $index })	无	无
sortable	对应列是否可以排序, 如果设置为'custom', 则代表用户希望远程排序, 需要监听Table的sort-change事件	boolean, string	true, false, 'custom'	false
sort-method	对数据进行排序的时候使用的方法, 仅当sortable设置为true的时候有效, 需返回一个数字, 和Array.sort表现一致	Function(a, b)	无	无
sort-by	指定数据按照哪个属性进行排序, 仅当sortable设置为true且没有设置sort-method的时候有效。如果sort-by为数组, 则先按照第1个属性排序, 如果第1个相等, 再按照第2个排序, 以此类推	String/Array/Function(row, index)	无	无
sort-orders	数据在排序时所使用排序策略的轮转顺序, 仅当sortable为true时有效。需传入一个数组, 随着用户点击表头, 该列依次按照数组中元素的顺序进行排序	array	数组中的元素需为以下三者之一: ascending表示升序, descending表示降序, null表示还原为原始顺序	['ascending', 'descending', null]
resizable	对应列是否可以通过拖动改变宽度(需要在el-table上设置border属性为真)	boolean	无	true
formatter	用来格式化内容	Function(row, column, cellValue, index)	无	无
show-overflow-tooltip	当内容过长被隐藏时显示tooltip	Boolean	无	false
align	对齐方式	String	left/center/right	left
header-align	表头对齐方式, 若不设置该项, 则使用表格的对齐方式	String	left/center/right	无
class-name	列的className	string	无	无
label-class-name	当前列标题的自定义类名	string	无	无
selectable	仅对type=selection的列有效, 类型为Function, Function的返回值用来决定这一行的CheckBox是否可以勾选	Function(row, index)	无	无
reserve-selection	仅对type=selection的列有效, 类型为Boolean, 为true则会在数据更新之后保留之前选中的数据(需指定row-key)	Boolean	无	false
filters	数据过滤的选项, 数组格式, 数组中的元素需要有text和value属性。	Array[{ text, value }]	无	无
filter-placement	过滤弹出框的定位	String	与Tooltip的placement属性相同	无
filter-multiple	数据过滤的选项是否多选	Boolean	无	true
filter-method	数据过滤使用的方法, 如果是多选的筛选项, 对每一条数据会执行多次, 任意一次返回true就会显示。	Function(value, row, column)	无	无
filtered-value	选中的数据过滤项, 如果需要自定义表头过滤的渲染方式, 可能会需要此属性。	Array	无	无

1.7. Table-column Scoped Slot

name	说明
—	自定义列的内容, 参数为{ row, column, $index }
header	自定义表头的内容.参数为{ column, $index }

2. Table表格例子

2.1. 使用脚手架新建一个名为element-ui-table的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import BaseTable from '../components/BaseTable.vue'
import StripeTable from '../components/StripeTable.vue'
import HighlightTable from '../components/HighlightTable.vue'
import BorderTable from '../components/BorderTable.vue'
import FixHeadTable from '../components/FixHeadTable.vue'
import FixColTable from '../components/FixColTable.vue'
import FixHeadColTable from '../components/FixHeadColTable.vue'
import MaxHeightTable from '../components/MaxHeightTable.vue'
import MultiHeadTable from '../components/MultiHeadTable.vue'
import RadioTable from '../components/RadioTable.vue'
import CheckboxTable from '../components/CheckboxTable.vue'
import SortTable from '../components/SortTable.vue'
import FiltersTable from '../components/FiltersTable.vue'
import ScopedTable from '../components/ScopedTable.vue'
import ExpandTable from '../components/ExpandTable.vue'
import ShowSummaryTable from '../components/ShowSummaryTable.vue'
import SpanMethodTable from '../components/SpanMethodTable.vue'
import IndexTable from '../components/IndexTable.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/BaseTable' },{ path: '/BaseTable', component: BaseTable },{ path: '/StripeTable', component: StripeTable },{ path: '/HighlightTable', component: HighlightTable },{ path: '/BorderTable', component: BorderTable },{ path: '/FixHeadTable', component: FixHeadTable },{ path: '/FixColTable', component: FixColTable },{ path: '/FixHeadColTable', component: FixHeadColTable },{ path: '/MaxHeightTable', component: MaxHeightTable },{ path: '/MultiHeadTable', component: MultiHeadTable },{ path: '/RadioTable', component: RadioTable },{ path: '/CheckboxTable', component: CheckboxTable },{ path: '/SortTable', component: SortTable },{ path: '/FiltersTable', component: FiltersTable },{ path: '/ScopedTable', component: ScopedTable },{ path: '/ExpandTable', component: ExpandTable },{ path: '/ShowSummaryTable', component: ShowSummaryTable },{ path: '/SpanMethodTable', component: SpanMethodTable },{ path: '/IndexTable', component: IndexTable }
]const router = new VueRouter({routes
})export default router

2.3. 在components下创建BaseTable.vue

<template><div><h1>基础表格-基础的表格展示用法</h1><h4>当el-table元素中注入data对象数组后, 在el-table-column中用prop属性来对应对象中的键名即可填入数据, 用label属性来定义表格的列名。可以使用width属性来定义列宽。</h4><el-table :data="tableData" style="width: 50%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}
}
</script>

2.4. 在components下创建StripeTable.vue

<template><div><h1>带斑马纹表格-使用带斑马纹的表格, 可以更容易区分出不同行的数据</h1><h4>stripe属性可以创建带斑马纹的表格。它接受一个Boolean, 默认为false, 设置为true即为启用。</h4><el-table :data="tableData" stripe style="width: 40%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}
}
</script>

2.5. 在components下创建HighlightTable.vue

<template><div><h1>带状态表格-可将表格内容highlight显示, 方便区分[成功、信息、警告、危险]等内容</h1><h4>可以通过指定Table组件的row-class-name属性来为Table中的某一行添加class, 表明该行处于某种状态。</h4><el-table :data="tableData" style="width: 50%" :row-class-name="tableRowClassName"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</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: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}}
}
</script>

2.6. 在components下创建BorderTable.vue

<template><div><h1>带边框表格</h1><h4>默认情况下, Table组件是不具有竖直方向的边框的, 如果需要, 可以使用border属性, 它接受一个Boolean, 设置为true即可启用。</h4><el-table :data="tableData" border style="width: 50%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}
}
</script>

2.7. 在components下创建FixHeadTable.vue

<template><div><h1>固定表头-纵向内容过多时, 可选择固定表头</h1><h4>只要在el-table元素中定义了height属性, 即可实现固定表头的表格, 而不需要额外的代码。</h4><el-table :data="tableData" height="250" border style="width: 40%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}]}}
}
</script>

2.8. 在components下创建FixColTable.vue

<template><div><h1>固定列-横向内容过多时, 可选择固定列</h1><h4>固定列需要使用fixed属性, 它接受Boolean值或者left/right, 表示左边固定还是右边固定。</h4><el-table :data="tableData" border style="width: 30%"><el-table-column fixed prop="date" label="日期" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="100"><template slot-scope="scope"><el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button><el-button type="text" size="small">编辑</el-button></template></el-table-column></el-table></div>
</template><script>
export default {methods: {handleClick (row) {console.log(row)}},data () {return {tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1517 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1519 弄',zip: 200333}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1516 弄',zip: 200333}]}}
}
</script>

2.9. 在components下创建FixHeadColTable.vue

<template><div><h1>固定列和表头-横纵内容过多时, 可选择固定列和表头</h1><h4>固定列和表头可以同时使用, 只需要将上述两个属性分别设置好即可。</h4><el-table :data="tableData" style="width: 40%" height="250"><el-table-column fixed prop="date" label="日期" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}}
}
</script>

2.10. 在components下创建MaxHeightTable.vue

<template><div><h1>流体高度-当数据量动态变化时, 可以为Table设置一个最大高度</h1><h4>通过设置max-height属性为Table指定最大高度。此时若表格所需的高度大于最大高度, 则会显示一个滚动条。</h4><el-table :data="tableData" style="width: 50%" max-height="250"><el-table-column fixed prop="date" label="日期" width="150"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编" width="120"></el-table-column><el-table-column fixed="right" label="操作" width="120"><template slot-scope="scope"><el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">移除</el-button></template></el-table-column></el-table></div>
</template><script>
export default {methods: {deleteRow (index, rows) {rows.splice(index, 1)}},data () {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}}
}
</script>

2.11. 在components下创建MultiHeadTable.vue

<template><div><h1>多级表头-数据结构比较复杂的时候, 可使用多级表头来展现数据的层次关系</h1><h4>只需要在el-table-column里面嵌套el-table-column, 就可以实现多级表头。</h4><el-table :data="tableData" style="width: 50%"><el-table-column prop="date" label="日期" width="150"></el-table-column><el-table-column label="配送信息"><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column label="地址"><el-table-column prop="province" label="省份" width="120"></el-table-column><el-table-column prop="city" label="市区" width="120"></el-table-column><el-table-column prop="address" label="地址" width="300"></el-table-column><el-table-column prop="zip" label="邮编"></el-table-column></el-table-column></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-08',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-06',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}, {date: '2016-05-07',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}}
}
</script>

2.12. 在components下创建RadioTable.vue

<template><div><h1>单选-选择单行数据时使用色块表示</h1><h4>Table组件提供了单选的支持, 只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件, 它会传入currentRow, oldCurrentRow。如果需要显示索引, 可以增加一列el-table-column, 设置type属性为index即可显示从1开始的索引号。</h4><el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%"><el-table-column type="index" width="50"></el-table-column><el-table-column property="date" label="日期" width="120"></el-table-column><el-table-column property="name" label="姓名" width="120"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="setCurrent(tableData[1])">选中第二行</el-button><el-button @click="setCurrent()">取消选择</el-button></div></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}],currentRow: null}},methods: {setCurrent (row) {this.$refs.singleTable.setCurrentRow(row)},handleCurrentChange (val) {this.currentRow = val}}
}
</script>

2.13. 在components下创建CheckboxTable.vue

<template><div><h1>多选-选择多行数据时使用Checkbox</h1><h4>实现多选非常简单: 手动添加一个el-table-column, 设type属性为selection即可; 默认情况下若内容过多会折行显示, 若需要单行显示可以使用show-overflow-tooltip属性, 它接受一个Boolean, 为true时多余的内容会在hover时以tooltip的形式显示出来。</h4><el-table ref="multipleTable" :data="tableData" style="width: 20%" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column label="日期" width="120"><template slot-scope="scope">{{ scope.row.date }}</template></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址" show-overflow-tooltip></el-table-column></el-table><div style="margin-top: 20px"><el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button><el-button @click="toggleSelection()">取消选择</el-button></div></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-08',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-06',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-07',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}],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>

2.14. 在components下创建SortTable.vue

<template><div><h1>排序-对表格进行排序, 可快速查找或对比数据</h1><h4>在列中设置sortable属性即可实现以该列为基准的排序, 接受一个Boolean, 默认为false。可以通过Table的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序, 需将sortable设置为custom, 同时在Table上监听sort-change事件, 在事件回调中可以获取当前排序的字段名和排序顺序, 从而向接口请求排序后的表格数据。在本例中, 我们还使用了formatter属性, 它用于格式化指定列的值, 接受一个Function, 会传入四个参数: row, column, cellValue和index, 可以根据自己的需求进行处理。</h4><el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}"><el-table-column prop="date" label="日期" sortable width="180"></el-table-column><el-table-column prop="name" label="姓名" sortable width="180"></el-table-column><el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-02',name: 'd王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: 'b王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: 'a王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: 'c王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {formatter (row, column, cellValue, index) {return index + row.address}}
}
</script>

2.15. 在components下创建FiltersTable.vue

<template><div><h1>筛选-对表格进行筛选, 可快速查找到自己想看的数据</h1><h4>在列中设置filtersfilter-method属性即可开启该列的筛选, filters是一个数组, filter-method是一个方法, 它用于决定某些数据是否显示, 会传入三个参数: value, row和column。</h4><el-table ref="filterTable" :data="tableData" style="width: 40%"><el-table-column prop="date" label="日期" sortable width="180" column-key="date" :filters="dateFilter" :filter-method="filterHandler"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址" :formatter="formatter"></el-table-column><el-table-column prop="tag" label="标签" width="100" :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]" :filter-method="filterTag" filter-placement="right-start"><template slot-scope="scope"><el-tag :type="scope.row.tag === '家' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag></template></el-table-column></el-table><el-button @click="resetDateFilter">清除日期过滤器</el-button><el-button @click="clearFilter">清除所有过滤器</el-button></div>
</template><script>
export default {data () {return {dateFilter: [{ 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' }],tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',tag: '家'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄',tag: '公司'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄',tag: '家'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄',tag: '公司'}]}},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.propertyreturn row[property] === value}}
}
</script>

2.16. 在components下创建ScopedTable.vue

<template><div><h1>自定义列模板-自定义列的显示内容，可组合其他组件使用</h1><h4>通过Scoped slot可以获取到row, column, $index和store(table内部的状态管理)的数据。</h4><el-table :data="tableData" style="width: 30%"><el-table-column label="日期" width="180"><template slot-scope="scope"><i class="el-icon-time"></i><span style="margin-left: 10px">{{ scope.row.date }}</span></template></el-table-column><el-table-column label="姓名" width="180"><template slot-scope="scope"><el-popover trigger="hover" placement="top"><p>姓名: {{ scope.row.name }}</p><p>住址: {{ scope.row.address }}</p><div slot="reference" class="name-wrapper"><el-tag size="medium">{{ scope.row.name }}</el-tag></div></el-popover></template></el-table-column><el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}},methods: {handleEdit (index, row) {console.log(index, row)},handleDelete (index, row) {console.log(index, row)}}
}
</script>

2.17. 在components下创建ExpandTable.vue

<template><div><h1>展开行-当行内容过多并且不想显示横向滚动条时, 可以使用Table展开行功能</h1><h4>通过设置type="expand"和Scoped slot可以开启展开行功能, el-table-column的模板会被渲染成为展开行的内容, 展开行可访问的属性与使用自定义列模板时的Scoped slot相同。</h4><el-table :data="tableData" style="width: 60%"><el-table-column type="expand"><template slot-scope="props"><el-form label-position="left" inline><el-form-item label="商品名称"><span>{{ props.row.name }}</span></el-form-item><el-form-item label="所属店铺"><span>{{ props.row.shop }}</span></el-form-item><el-form-item label="商品 ID"><span>{{ props.row.id }}</span></el-form-item><el-form-item label="店铺 ID"><span>{{ props.row.shopId }}</span></el-form-item><el-form-item label="商品分类"><span>{{ props.row.category }}</span></el-form-item><el-form-item label="店铺地址"><span>{{ props.row.address }}</span></el-form-item><el-form-item label="商品描述"><span>{{ props.row.desc }}</span></el-form-item></el-form></template></el-table-column><el-table-column label="商品 ID" prop="id"></el-table-column><el-table-column label="商品名称" prop="name"></el-table-column><el-table-column label="描述" prop="desc"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{id: '12987122',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987123',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987125',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987126',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}]}}
}
</script>

2.18. 在components下创建ShowSummaryTable.vue

<template><div><h1>表尾合计行-若表格展示的是各类数字, 可以在表尾显示各列的合计</h1><h4>将show-summary设置为true就会在表格尾部展示合计行。默认情况下, 对于合计行, 第一列不进行数据求合操作, 而是显示「合计」二字(可通过sum-text配置), 其余列会将本列所有数值进行求合操作, 并显示出来。当然, 你也可以定义自己的合计逻辑。使用summary-method并传入一个方法, 返回一个数组, 这个数组中的各项就会显示在合计行的各列中, 具体可以参考本例中的第二个表格。</h4><el-table :data="tableData" border show-summary style="width: 100%"><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="amount1" sortable label="数值 1"></el-table-column><el-table-column prop="amount2" sortable label="数值 2"></el-table-column><el-table-column prop="amount3" sortable label="数值 3"></el-table-column></el-table><el-table :data="tableData" border :summary-method="getSummaries" show-summary style="width: 100%; margin-top: 20px"><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="amount1" label="数值 1(元)"></el-table-column><el-table-column prop="amount2" label="数值 2(元)"></el-table-column><el-table-column prop="amount3" label="数值 3(元)"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}, {id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12}, {id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9}, {id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17}, {id: '12987126',name: '王小虎',amount1: '539',amount2: '4.1',amount3: 15}]}},methods: {getSummaries (param) {const { columns, data } = paramconst sums = []columns.forEach((column, index) => {if (index === 0) {sums[index] = '总价'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] += ' 元'} else {sums[index] = 'N/A'}})return sums}}
}
</script>

2.19. 在components下创建SpanMethodTable.vue

<template><div><h1>合并行或列-多行或多列共用一个数据时, 可以合并行或列</h1><h4>通过给table传入span-method方法可以实现合并行或列, 方法的参数是一个对象, 里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组, 第一个元素代表rowspan, 第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。</h4><el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%"><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="amount1" sortable label="数值 1"></el-table-column><el-table-column prop="amount2" sortable label="数值 2"></el-table-column><el-table-column prop="amount3" sortable label="数值 3"></el-table-column></el-table><el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"><el-table-column prop="id" label="ID" width="180"></el-table-column><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="amount1" label="数值 1(元)"></el-table-column><el-table-column prop="amount2" label="数值 2(元)"></el-table-column><el-table-column prop="amount3" label="数值 3(元)"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{id: '12987122',name: '王小虎',amount1: '234',amount2: '3.2',amount3: 10}, {id: '12987123',name: '王小虎',amount1: '165',amount2: '4.43',amount3: 12}, {id: '12987124',name: '王小虎',amount1: '324',amount2: '1.9',amount3: 9}, {id: '12987125',name: '王小虎',amount1: '621',amount2: '2.2',amount3: 17}, {id: '12987126',name: '王小虎',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>

2.20. 在components下创建IndexTable.vue

<template><div><h1>自定义索引-自定义type=index列的行号</h1><h4>通过给type=index的列传入index属性, 可以自定义索引。该属性传入数字时, 将作为索引的起始值。也可以传入一个方法, 它提供当前行的行号(从0开始)作为参数, 返回值将作为索引展示。</h4><el-table :data="tableData" style="width: 100%"><el-table-column type="index" :index="indexMethod"></el-table-column><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script>
export default {data () {return {tableData: [{date: '2016-05-02',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333,tag: '家'}, {date: '2016-05-04',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1517 弄',zip: 200333,tag: '公司'}, {date: '2016-05-01',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1519 弄',zip: 200333,tag: '家'}, {date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1516 弄',zip: 200333,tag: '公司'}]}},methods: {indexMethod (index) {return index * 2}}
}
</script>

2.21. 运行项目, 访问http://localhost:8080/#/BaseTable