Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
loujc2008
gin-vue-admin
提交
b534be70
G
gin-vue-admin
项目概览
loujc2008
/
gin-vue-admin
与 Fork 源项目一致
Fork自
FLIPPED-AURORA / gin-vue-admin
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
b534be70
编写于
10月 22, 2019
作者:
Mr.奇淼(
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
增加前端示例
上级
a3f5a199
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
108 addition
and
3 deletion
+108
-3
QMPlusVuePage/src/view/example/table/table.vue
QMPlusVuePage/src/view/example/table/table.vue
+108
-3
未找到文件。
QMPlusVuePage/src/view/example/table/table.vue
浏览文件 @
b534be70
// table 纯前端示例
<
template
>
<div>
多种表格示例
<div>
<el-table
:data=
"tableData"
@
selection-change=
"handleSelectionChange"
border
ref=
"multipleTable"
stripe
style=
"width: 100%"
tooltip-effect=
"dark"
>
<el-table-column
type=
"selection"
width=
"55"
></el-table-column>
<el-table-column
label=
"日期"
width=
"120"
>
<template
slot-scope=
"scope"
>
{{
scope
.
row
.
date
}}
</
template
>
</el-table-column>
<el-table-column
label=
"姓名"
prop=
"name"
width=
"120"
></el-table-column>
<el-table-column
label=
"年龄"
prop=
"age"
width=
"120"
></el-table-column>
<el-table-column
label=
"住址"
prop=
"address"
show-overflow-tooltip
></el-table-column>
<el-table-column
label=
"是否禁用"
prop=
"switch"
>
<
template
scope=
"scope"
>
<el-switch
active-text=
"开启"
inactive-text=
"禁用"
v-model=
"scope.row.switch"
></el-switch>
</
template
>
</el-table-column>
<el-table-column
label=
"按钮组"
>
<
template
scope=
"scope"
>
<el-button
type=
"text"
size=
"small"
@
click=
"toggleSelection([scope.row])"
>
按钮1
</el-button>
<el-button
type=
"text"
size=
"small"
@
click=
"toggleSelection([scope.row])"
>
按钮2
</el-button>
<el-button
type=
"text"
size=
"small"
@
click=
"toggleSelection([scope.row])"
>
按钮3
</el-button>
</
template
>
</el-table-column>
</el-table>
<div
style=
"margin-top: 20px"
>
<el-button
@
click=
"toggleSelection([tableData[1], tableData[2]])"
>
切换第二、第三行的选中状态
</el-button>
<el-button
@
click=
"toggleSelection()"
>
取消选择
</el-button>
</div>
</div>
</template>
<
script
>
export
default
{
name
:
'
Table
'
name
:
'
Table
'
,
data
()
{
return
{
tableData
:
[
{
date
:
'
2016-05-03
'
,
name
:
'
王小虎
'
,
age
:
12
,
address
:
'
上海市普陀区金沙江路 1518 弄
'
,
switch
:
true
},
{
date
:
'
2016-05-02
'
,
name
:
'
王小虎
'
,
age
:
12
,
address
:
'
上海市普陀区金沙江路 1518 弄
'
,
switch
:
true
},
{
date
:
'
2016-05-04
'
,
name
:
'
王小虎
'
,
age
:
12
,
address
:
'
上海市普陀区金沙江路 1518 弄
'
,
switch
:
true
},
{
date
:
'
2016-05-01
'
,
name
:
'
王小虎
'
,
age
:
12
,
address
:
'
上海市普陀区金沙江路 1518 弄
'
,
switch
:
false
},
{
date
:
'
2016-05-08
'
,
name
:
'
王小虎
'
,
age
:
12
,
address
:
'
上海市普陀区金沙江路 1518 弄
'
,
switch
:
true
},
{
date
:
'
2016-05-06
'
,
name
:
'
王小虎
'
,
age
:
12
,
address
:
'
上海市普陀区金沙江路 1518 弄
'
,
switch
:
true
},
{
date
:
'
2016-05-07
'
,
name
:
'
王小虎
'
,
age
:
12
,
address
:
'
上海市普陀区金沙江路 1518 弄
'
,
switch
:
false
}
],
multipleSelection
:
[]
}
},
methods
:
{
toggleSelection
(
rows
)
{
if
(
rows
)
{
rows
.
forEach
(
row
=>
{
this
.
$refs
.
multipleTable
.
toggleRowSelection
(
row
)
})
}
else
{
this
.
$refs
.
multipleTable
.
clearSelection
()
}
},
handleSelectionChange
(
val
)
{
this
.
multipleSelection
=
val
}
}
}
</
script
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录