mirror of https://github.com/ElemeFE/element
Table: add setCurrentRow (#4390)
杨奕
cinwell.li
parent
0bf50bfc2e
commit
91476e5c79
|
|
@ -160,6 +160,19 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
setCurrent(row) {
|
||||
this.$refs.singleTable.setCurrentRow(row);
|
||||
},
|
||||
toggleSelection(rows) {
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
});
|
||||
} else {
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
}
|
||||
},
|
||||
|
||||
handleClick() {
|
||||
console.log('click');
|
||||
},
|
||||
|
|
@ -977,6 +990,7 @@ Single row selection is supported.
|
|||
```html
|
||||
<template>
|
||||
<el-table
|
||||
ref="singleTable"
|
||||
:data="tableData"
|
||||
highlight-current-row
|
||||
@current-change="handleCurrentChange"
|
||||
|
|
@ -1000,6 +1014,10 @@ Single row selection is supported.
|
|||
label="Address">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 20px">
|
||||
<el-button @click="setCurrent(tableData[1])">Select second row</el-button>
|
||||
<el-button @click="setCurrent()">Clear selection</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -1028,6 +1046,9 @@ Single row selection is supported.
|
|||
},
|
||||
|
||||
methods: {
|
||||
setCurrent(row) {
|
||||
this.$refs.singleTable.setCurrentRow(row);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentRow = val;
|
||||
}
|
||||
|
|
@ -1045,6 +1066,7 @@ You can also select multiple rows.
|
|||
```html
|
||||
<template>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData3"
|
||||
border
|
||||
style="width: 100%"
|
||||
|
|
@ -1069,6 +1091,10 @@ You can also select multiple rows.
|
|||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 20px">
|
||||
<el-button @click="toggleSelection([tableData3[1], tableData3[2]])">Toggle selection status of second and third rows</el-button>
|
||||
<el-button @click="toggleSelection()">Clear selection</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -1109,6 +1135,15 @@ You can also select multiple rows.
|
|||
},
|
||||
|
||||
methods: {
|
||||
toggleSelection(rows) {
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
});
|
||||
} else {
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
}
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
}
|
||||
|
|
@ -1479,8 +1514,9 @@ When the row content is too long and you do not want to display the horizontal s
|
|||
### Table Methods
|
||||
| Method | Description | Parameters |
|
||||
|------|--------|-------|
|
||||
| clearSelection | clear selection, might be useful when `reserve-selection` is on | selection |
|
||||
| toggleRowSelection | toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
|
||||
| clearSelection | used in multiple selection Table, clear selection, might be useful when `reserve-selection` is on | selection |
|
||||
| toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
|
||||
| setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
|
||||
|
||||
### Table-column Attributes
|
||||
| Attribute | Description | Type | Accepted Values | Default |
|
||||
|
|
|
|||
|
|
@ -200,6 +200,19 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
setCurrent(row) {
|
||||
this.$refs.singleTable.setCurrentRow(row);
|
||||
},
|
||||
toggleSelection(rows) {
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
});
|
||||
} else {
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
}
|
||||
},
|
||||
|
||||
handleClick() {
|
||||
console.log('click');
|
||||
},
|
||||
|
|
@ -1039,6 +1052,7 @@
|
|||
```html
|
||||
<template>
|
||||
<el-table
|
||||
ref="singleTable"
|
||||
:data="tableData"
|
||||
highlight-current-row
|
||||
@current-change="handleCurrentChange"
|
||||
|
|
@ -1062,6 +1076,10 @@
|
|||
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -1090,6 +1108,9 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
setCurrent(row) {
|
||||
this.$refs.singleTable.setCurrentRow(row);
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.currentRow = val;
|
||||
}
|
||||
|
|
@ -1107,6 +1128,7 @@
|
|||
```html
|
||||
<template>
|
||||
<el-table
|
||||
ref="multipleTable"
|
||||
:data="tableData3"
|
||||
border
|
||||
tooltip-effect="dark"
|
||||
|
|
@ -1132,6 +1154,10 @@
|
|||
show-overflow-tooltip>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 20px">
|
||||
<el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
|
||||
<el-button @click="toggleSelection()">取消选择</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -1172,6 +1198,15 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
toggleSelection(rows) {
|
||||
if (rows) {
|
||||
rows.forEach(row => {
|
||||
this.$refs.multipleTable.toggleRowSelection(row);
|
||||
});
|
||||
} else {
|
||||
this.$refs.multipleTable.clearSelection();
|
||||
}
|
||||
},
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = val;
|
||||
}
|
||||
|
|
@ -1564,8 +1599,9 @@
|
|||
### Table Methods
|
||||
| 方法名 | 说明 | 参数 |
|
||||
| ---- | ---- | ---- |
|
||||
| clearSelection | 清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法 | selection |
|
||||
| toggleRowSelection | 切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
|
||||
| clearSelection | 用于多选表格，清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法 | selection |
|
||||
| toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
|
||||
| setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
|
||||
|
||||
### Table-column Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|
|
|
|||
|
|
@ -181,6 +181,10 @@
|
|||
},
|
||||
|
||||
methods: {
|
||||
setCurrentRow(row) {
|
||||
this.store.commit('setCurrentRow', row);
|
||||
},
|
||||
|
||||
toggleRowSelection(row, selected) {
|
||||
this.store.toggleRowSelection(row, selected);
|
||||
this.store.updateAllSelected();
|
||||
|
|
|
|||
Loading…
Reference in New Issue