Skip to content

E
Element
Commit 91476e5c authored by 杨奕's avatar 杨奕 Committed by cinwell.li
Browse files
Options

Table: add setCurrentRow (#4390)

parent 0bf50bfc
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 4 deletions
examples/docs/en-US/table.md
View file @ 91476e5c
......@@ -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 |
......
examples/docs/zh-CN/table.md
View file @ 91476e5c
......@@ -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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
......
packages/table/src/table.vue
View file @ 91476e5c
......@@ -181,6 +181,10 @@
},
methods: {
setCurrentRow(row) {
this.store.commit('setCurrentRow', row);
},
toggleRowSelection(row, selected) {
this.store.toggleRowSelection(row, selected);
this.store.updateAllSelected();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment