|
@@ -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 } |
|