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

2.22. 运行项目, 访问http://localhost:8080/#/StripeTable

2.23. 运行项目, 访问http://localhost:8080/#/HighlightTable

2.24. 运行项目, 访问http://localhost:8080/#/BorderTable

2.25. 运行项目, 访问http://localhost:8080/#/FixHeadTable

2.26. 运行项目, 访问http://localhost:8080/#/FixColTable

2.27. 运行项目, 访问http://localhost:8080/#/FixHeadColTable

2.28. 运行项目, 访问http://localhost:8080/#/MaxHeightTable

2.29. 运行项目, 访问http://localhost:8080/#/MultiHeadTable

2.30. 运行项目, 访问http://localhost:8080/#/RadioTable

2.31. 运行项目, 访问http://localhost:8080/#/CheckboxTable

2.32. 运行项目, 访问http://localhost:8080/#/SortTable

2.33. 运行项目, 访问http://localhost:8080/#/FiltersTable

2.34. 运行项目, 访问http://localhost:8080/#/ScopedTable

2.35. 运行项目, 访问http://localhost:8080/#/ExpandTable

2.36. 运行项目, 访问http://localhost:8080/#/ShowSummaryTable

2.37. 运行项目, 访问http://localhost:8080/#/SpanMethodTable

2.38. 运行项目, 访问http://localhost:8080/#/IndexTable

022_Table表格相关推荐

  1. jvm虚拟机规范 紧接上文的

    dneg dneg指令是类型安全的,if在传入的操作数堆栈中有一个类型匹配的双倍数.dneg指令不改变类型状态. instructionIsTypeSafe(dneg, Environment, _O ...

  2. TensorRT 数据和表格示例

    TensorRT 数据和表格示例 TensorRT 7.1在绑定索引方面比其前身更加严格.以前,允许错误配置文件的绑定索引.考虑一个网络,该网络具有四个输入,一个输出,以及在其中的三个优化配置文件 I ...

  3. HarmonyOS UI开发 TableLayout(表格布局) 的使用

    TableLayout 是什么 TableLayout  是表格布局,就是使用表格的方式划分子组件, 个人感觉应该也不是常用的布局,常用的还是选择DirectionalLayout和Dependent ...

  4. python 读取excel 表格的数据

    自己随便写了一个表格如下 使用工具xlrd 如果没有下载 可以使用pip install xlrd 下载一个 大致需要一下几个步骤 1 打开excel table = xlrd.open_workbo ...

  5. Python xlrd 读取excel表格 常用用法整理

    xlrd 的使用 #!/usr/bin/python# # -*- coding: utf-8 -*- import xlrd import sys reload(sys) sys.setdefaul ...

  6. TableLayout 表格布局,FrameLaout 帧布局 ，AbsoluteLayout绝对布局的分析

    这三个布局就放在一起来写了他们用的比较少,不过为了写这遍 博客我换特意去复习了下, 第一个表格布局TableLayout 表格布局顾名思义 就是与表格类似,以行,列形式来管理其中的组件的, 它是< ...

  7. 0x02 mysql 表格相关操作

    1.创建table 语法: create table  表格名称(列名 类型); NOT NULL:该列数据不能为空 AUTO_INCREMENT:定义该字段是否自增 primary key(xxx) ...

  8. html表格联动,html前端基础：table和select操作

    html前端基础:table和select操作 发布时间:2020-05-13 09:58:10 来源:亿速云 阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...

  9. 表格下划线怎么加粗_这招高！Excel签名栏的下划线随列宽变化，是不是感觉牛哄哄的？...

    职场牛人的世界总有各种高招,随手蹦出,令人赞叹不已! 今天早上去填一个表格,在输入签名时,突然发现签名处的下划线是随着列宽的变化而自动变化,这绝对是动态的,这是怎么做到的呢? 我特意看了一下这个单元格 ...

最新文章

  1. oracle10g sql跟踪,SQL性能的度量 - 语句级别的SQL跟踪autotrace
  2. html h 不换行,css 强制不换行
  3. 开发日记-20190430 关键词 apt,aspectj,javassist
  4. 《统一沟通-微软-实战》-6-部署-2-中介服务器-6-语音路由-路由
  5. 查询oracle中用户的角色,oracle中用户角色的查询和授权
  6. demo 网络运维_网络运维简介
  7. git push 的符号笔有什么用_Git 标签（tag）作用、分支区别及常用命令
  8. 转载标明出处用英语_英语原版阅读：At the beach
  9. Men and women can't be 'just friends
  10. java zip 压缩文件夹_java zip 实现压缩文件和文件夹类Compressor.java
  11. Java 编程语言单词汇总
  12. pvacseq数据分析示例之准备数据，用VEP注释vcffile
  13. [开发笔记]-多线程
  14. c++实现右下角弹窗
  15. 【bzoj3240 洛谷P1397】矩阵游戏[NOI2013]（矩阵乘法+卡常）
  16. AB-PLC之间通讯
  17. 三年级计算机绘画第二课堂教案,美术第二课堂计划讲解.docx
  18. Unraid安装Transmission 超简单(2022/10/21)
  19. 16 tia 内容说明 安装包_TIA Portal V16 软件安装包 安装教程 授权
  20. 用wvdial和ppp轻松上网

热门文章

  1. 怎么找回失踪的NTLDR文件
  2. Android-JNINDK(一)入门
  3. MySQL数据库存储过程动态表建立(PREPARE)
  4. mysql C语言API接口及实例
  5. Web Performance and Load Test Project错误集
  6. 忠告28：奥纳西斯：处处留心皆学问
  7. 第二章 如何学习Linux(鸟哥的Linux私房菜基础学习篇)
  8. 为什么需要IP地址？—Vecloud微云
  9. Asp.net 中 OnClientClick 与 OnClick 的执行顺序
  10. 现在使用控件, 更喜欢继承（覆盖控件已有的函数，很奇怪的一种使用方式）...