mirror of https://github.com/ElemeFE/element
Table: update docs (#1740)
杨奕
baiyaaaaa
parent
3bf624c757
commit
6fa2a7049f
|
|
@ -146,6 +146,13 @@
|
|||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}, {
|
||||
date: '2016-05-07',
|
||||
name: 'Tom',
|
||||
state: 'California',
|
||||
city: 'Los Angeles',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
zip: 'CA 90036'
|
||||
}],
|
||||
currentRow: null,
|
||||
multipleSelection: []
|
||||
|
|
@ -734,7 +741,7 @@ When you have huge chunks of data to put in a table, you can fix the header and
|
|||
|
||||
When the the data is dynamically changed, you might want the table to have a maximum height rather than a fixed height and to show the scroll bar if needed.
|
||||
|
||||
:::demo By setting the attribute `maxHeight` of `el-table`, you can fix the table header. The table body scrolls only if the height of the rows exceeds the maxHeight value.
|
||||
:::demo By setting the attribute `max-height` of `el-table`, you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
|
|
|
|||
|
|
@ -104,6 +104,56 @@
|
|||
address: '上海市普陀区金沙江路 1518 弄',
|
||||
zip: 200333
|
||||
}],
|
||||
tableData4: [{
|
||||
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
|
||||
}],
|
||||
currentRow: null,
|
||||
multipleSelection: []
|
||||
};
|
||||
|
|
@ -145,6 +195,10 @@
|
|||
return 'positive-row';
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
deleteRow(index, rows) {
|
||||
rows.splice(index, 1);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -693,6 +747,133 @@
|
|||
```
|
||||
:::
|
||||
|
||||
### 流体高度
|
||||
|
||||
当数据量动态变化时，可以为 Table 设置一个最大高度。
|
||||
|
||||
:::demo 通过设置`max-height`属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。
|
||||
```html
|
||||
<template>
|
||||
<el-table
|
||||
:data="tableData4"
|
||||
border
|
||||
style="width: 100%"
|
||||
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
|
||||
inline-template
|
||||
:context="_self"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="120">
|
||||
<span>
|
||||
<el-button
|
||||
@click.native.prevent="deleteRow($index, tableData4)"
|
||||
type="text"
|
||||
size="small">
|
||||
移除
|
||||
</el-button>
|
||||
</span>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
deleteRow(index, rows) {
|
||||
rows.splice(index, 1);
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData4: [{
|
||||
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>
|
||||
```
|
||||
:::
|
||||
|
||||
### 多级表头
|
||||
|
||||
数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。
|
||||
|
|
@ -1208,6 +1389,7 @@
|
|||
| cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event |
|
||||
| cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event |
|
||||
| row-click | 当某一行被点击时会触发该事件 | row, event |
|
||||
| row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event |
|
||||
| row-dblclick | 当某一行被双击时会触发该事件 | row, event |
|
||||
| header-click | 当某一列的表头被点击时会触发该事件 | column, event |
|
||||
| sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } |
|
||||
|
|
|
|||
Loading…
Reference in New Issue