Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
E
Element
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
CI / CD Analytics
Repository Analytics
Value Stream Analytics
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
林焕东
Element
Commits
f8fdf35b
Commit
f8fdf35b
authored
Oct 21, 2016
by
furybean
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[Table] Remove prop: selectionMode & allowNoCurrentRow
parent
92bd2275
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
3 additions
and
124 deletions
+3
-124
examples/docs/zh-cn/table.md
examples/docs/zh-cn/table.md
+1
-73
packages/table/src/table-body.js
packages/table/src/table-body.js
+0
-2
packages/table/src/table-store.js
packages/table/src/table-store.js
+1
-34
packages/table/src/table.vue
packages/table/src/table.vue
+1
-15
No files found.
examples/docs/zh-cn/table.md
View file @
f8fdf35b
...
...
@@ -666,85 +666,15 @@
```
:::
### 单选
选择单行数据时使用色块表示。
:::demo Table 组件提供了选择的支持,只需要配置
`selection-mode`
属性即可实现单选(
`single`
)、多选(
`multiple`
),如果不需要则设置为
`none`
。之后由
`selection-change`
事件来管理选中时触发的事件,它会传入一个
`value`
,
`value`
为生成表格时的对应对象。本例中还使用了
`allow-no-current-row`
属性,它接受一个
`Boolean`
,若为
`true`
,则允许为空,默认为
`false`
,此时将会产生默认值,为填入数组的第一个对象。如果需要显示索引,可以增加一列
`el-table-column`
,设置
`type`
属性为
`index`
即可显示从 1 开始的索引号。
```
html
<template>
<el-table
:data=
"tableData"
selection-mode=
"single"
@
selection-change=
"handleSelectionChange"
style=
"width: 100%"
allow-no-current-row
>
<el-table-column
type=
"index"
width=
"50"
>
</el-table-column>
<el-table-column
prop=
"date"
label=
"日期"
width=
"120"
>
</el-table-column>
<el-table-column
prop=
"name"
label=
"姓名"
width=
"120"
>
</el-table-column>
<el-table-column
prop=
"address"
label=
"地址"
>
</el-table-column>
</el-table>
</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 弄
'
}],
singleSelection
:
{}
}
},
methods
:
{
handleSelectionChange
(
val
)
{
this
.
singleSelection
=
val
;
}
}
}
</script>
```
:::
### 多选
选择多行数据时使用 Checkbox。
:::demo
除了
`selection-mode`
的设置外,多选与单选并没有太大差别,只是传入
`selection-change`
事件中的参数从对象变成了对象数组。此外,需要提供一个列来显示多选框
: 手动添加一个
`el-table-column`
,设
`type`
属性为
`selection`
即可。在本例中,为了方便说明其他属性,我们还使用了
`inline-template`
和
`show-tooltip-when-overflow`
:设置了
`inline-template`
属性后,可以通过调用
`row`
对象中的值取代
`prop`
属性的设置;默认情况下若内容过多会折行显示,若需要单行显示可以使用
`show-tooltip-when-overflow`
属性,它接受一个
`Boolean`
,为
`true`
时多余的内容会在 hover 时以 tooltip 的形式显示出来。
:::demo
实现多选非常简单
: 手动添加一个
`el-table-column`
,设
`type`
属性为
`selection`
即可。在本例中,为了方便说明其他属性,我们还使用了
`inline-template`
和
`show-tooltip-when-overflow`
:设置了
`inline-template`
属性后,可以通过调用
`row`
对象中的值取代
`prop`
属性的设置;默认情况下若内容过多会折行显示,若需要单行显示可以使用
`show-tooltip-when-overflow`
属性,它接受一个
`Boolean`
,为
`true`
时多余的内容会在 hover 时以 tooltip 的形式显示出来。
```
html
<template>
<el-table
:data=
"tableData3"
selection-mode=
"multiple"
style=
"width: 100%"
@
selection-change=
"handleMultipleSelectionChange"
>
<el-table-column
...
...
@@ -890,8 +820,6 @@
| fit | 列的宽度是否自撑开 | boolean | — | true |
| row-class-name | 行的 className 的回调,会传入 row, index。 | Function | - | - |
| row-key | 行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的 | Function, String | - | |
| selection-mode | 列表项选择模式 | string | single/multiple/none | none |
| allow-no-current-row | 单选模式是否允许选项为空 | boolean | — | false |
### Table Events
| 事件名 | 说明 | 参数 |
...
...
packages/table/src/table-body.js
View file @
f8fdf35b
...
...
@@ -166,8 +166,6 @@ export default {
}
}
this
.
store
.
commit
(
'
setSelectedRow
'
,
row
);
table
.
$emit
(
'
row-click
'
,
row
,
event
);
},
...
...
packages/table/src/table-store.js
View file @
f8fdf35b
...
...
@@ -33,8 +33,6 @@ const TableStore = function(table, initialState = {}) {
isAllSelected
:
false
,
selection
:
[],
reserveSelection
:
false
,
allowNoCurrentRow
:
false
,
selectionMode
:
'
none
'
,
selectable
:
null
,
currentRow
:
null
,
hoverRow
:
null
...
...
@@ -54,7 +52,6 @@ TableStore.prototype.mutations = {
data
.
forEach
((
item
)
=>
Vue
.
set
(
item
,
'
$selected
'
,
false
));
}
states
.
data
=
orderBy
((
data
||
[]),
states
.
sortCondition
.
property
,
states
.
sortCondition
.
direction
);
this
.
updateCurrentRow
();
if
(
!
states
.
reserveSelection
)
{
states
.
isAllSelected
=
false
;
...
...
@@ -175,13 +172,7 @@ TableStore.prototype.mutations = {
}
this
.
table
.
$emit
(
'
select-all
'
,
selection
);
states
.
isAllSelected
=
value
;
}),
setSelectedRow
(
states
,
row
)
{
if
(
states
.
selectionMode
===
'
single
'
)
{
states
.
currentRow
=
row
;
}
}
})
};
TableStore
.
prototype
.
updateColumns
=
function
()
{
...
...
@@ -230,30 +221,6 @@ TableStore.prototype.updateAllSelected = function() {
states
.
isAllSelected
=
isAllSelected
;
};
TableStore
.
prototype
.
updateCurrentRow
=
function
()
{
const
states
=
this
.
states
;
const
table
=
this
.
table
;
const
data
=
states
.
data
||
[];
if
(
states
.
selectionMode
===
'
single
'
)
{
const
oldCurrentRow
=
states
.
currentRow
;
if
(
oldCurrentRow
===
null
&&
!
states
.
allowNoCurrentRow
)
{
states
.
currentRow
=
data
[
0
];
if
(
states
.
currentRow
!==
oldCurrentRow
)
{
table
.
$emit
(
'
selection-change
'
,
states
.
currentRow
);
}
}
else
if
(
data
.
indexOf
(
oldCurrentRow
)
===
-
1
)
{
if
(
!
states
.
allowNoCurrentRow
)
{
states
.
currentRow
=
data
[
0
];
}
else
{
states
.
currentRow
=
null
;
}
if
(
states
.
currentRow
!==
oldCurrentRow
)
{
table
.
$emit
(
'
selection-change
'
,
states
.
currentRow
);
}
}
}
};
TableStore
.
prototype
.
scheduleLayout
=
function
()
{
this
.
table
.
debouncedLayout
();
};
...
...
packages/table/src/table.vue
View file @
f8fdf35b
...
...
@@ -118,15 +118,8 @@
border
:
Boolean
,
selectionMode
:
{
type
:
String
,
default
:
'
none
'
},
rowKey
:
[
String
,
Function
],
allowNoCurrentRow
:
Boolean
,
rowClassName
:
[
String
,
Function
]
},
...
...
@@ -197,12 +190,7 @@
},
selection
()
{
if
(
this
.
selectionMode
===
'
multiple
'
)
{
return
this
.
store
.
selection
;
}
else
if
(
this
.
selectionMode
===
'
single
'
)
{
return
this
.
store
.
currentRow
;
}
return
null
;
return
this
.
store
.
selection
;
},
columns
()
{
...
...
@@ -248,8 +236,6 @@
data
()
{
const
store
=
new
TableStore
(
this
,
{
allowNoCurrentRow
:
this
.
allowNoCurrentRow
,
selectionMode
:
this
.
selectionMode
,
rowKey
:
this
.
rowKey
});
const
layout
=
new
TableLayout
({
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment