Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
InJoyU
vue-element-admin
提交
577e4dc1
V
vue-element-admin
项目概览
InJoyU
/
vue-element-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
5
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-element-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
577e4dc1
编写于
10月 26, 2017
作者:
P
Pan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
refactor: case sensitive
上级
0d9188b2
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
124 addition
and
0 deletion
+124
-0
src/views/example/table/dynamicTable/fixedThead.vue
src/views/example/table/dynamicTable/fixedThead.vue
+58
-0
src/views/example/table/dynamicTable/index.vue
src/views/example/table/dynamicTable/index.vue
+19
-0
src/views/example/table/dynamicTable/unfixedThead.vue
src/views/example/table/dynamicTable/unfixedThead.vue
+47
-0
未找到文件。
src/views/example/table/dynamicTable/fixedThead.vue
0 → 100644
浏览文件 @
577e4dc1
<
template
>
<div
class=
"app-container"
>
<div
class=
"filter-container"
>
<el-checkbox-group
v-model=
"checkboxVal"
>
<el-checkbox
label=
"apple"
>
apple
</el-checkbox>
<el-checkbox
label=
"banana"
>
banana
</el-checkbox>
<el-checkbox
label=
"orange"
>
orange
</el-checkbox>
</el-checkbox-group>
</div>
<el-table
:data=
"tableData"
:key=
'key'
style=
"width: 100%"
>
<el-table-column
prop=
"name"
label=
"fruitName"
width=
"180"
></el-table-column>
<el-table-column
:key=
'fruit'
v-for=
'(fruit,index) in formThead'
:label=
"fruit"
>
<template
scope=
"scope"
>
{{
scope
.
row
[
fruit
]
}}
</
template
>
</el-table-column>
</el-table>
</div>
</template>
<
script
>
const
defaultFormThead
=
[
'
apple
'
,
'
banana
'
]
// 默认选中项
export
default
{
data
()
{
return
{
tableData
:
[
{
name
:
'
fruit-1
'
,
apple
:
'
apple-10
'
,
banana
:
'
banana-10
'
,
orange
:
'
orange-10
'
},
{
name
:
'
fruit-2
'
,
apple
:
'
apple-20
'
,
banana
:
'
banana-20
'
,
orange
:
'
orange-20
'
}
],
key
:
1
,
// table key
formTheadOptions
:
[
'
apple
'
,
'
banana
'
,
'
orange
'
],
// 可选择表头
checkboxVal
:
defaultFormThead
,
// checkboxVal
formThead
:
defaultFormThead
// 默认表头
}
},
watch
:
{
checkboxVal
(
valArr
)
{
this
.
formThead
=
this
.
formTheadOptions
.
filter
(
i
=>
valArr
.
indexOf
(
i
)
>=
0
)
this
.
key
=
this
.
key
+
1
// 为了保证table 每次都会重渲 (牺牲性能保证效果,当然也可以不用)
}
}
}
</
script
>
src/views/example/table/dynamicTable/index.vue
0 → 100644
浏览文件 @
577e4dc1
<
template
>
<div
class=
"app-container"
>
<div
style=
'margin:0 0 5px 20px'
>
固定表头 按照表头顺序排序
</div>
<fixed-thead></fixed-thead>
<div
style=
'margin:30px 0 5px 20px'
>
不固定表头 按照点击顺序排序
</div>
<unfixed-thead></unfixed-thead>
</div>
</
template
>
<
script
>
import
fixedThead
from
'
./fixedThead
'
import
unfixedThead
from
'
./unfixedThead
'
export
default
{
components
:
{
fixedThead
,
unfixedThead
}
}
</
script
>
src/views/example/table/dynamicTable/unfixedThead.vue
0 → 100644
浏览文件 @
577e4dc1
<
template
>
<div
class=
"app-container"
>
<div
class=
"filter-container"
>
<el-checkbox-group
v-model=
"formThead"
>
<el-checkbox
label=
"apple"
>
apple
</el-checkbox>
<el-checkbox
label=
"banana"
>
banana
</el-checkbox>
<el-checkbox
label=
"orange"
>
orange
</el-checkbox>
</el-checkbox-group>
</div>
<el-table
:data=
"tableData"
style=
"width: 100%"
>
<el-table-column
prop=
"name"
label=
"fruitName"
width=
"180"
>
</el-table-column>
<el-table-column
:key=
'fruit'
v-for=
'(fruit,index) in formThead'
:label=
"fruit"
>
<template
scope=
"scope"
>
{{
scope
.
row
[
fruit
]
}}
</
template
>
</el-table-column>
</el-table>
</div>
</template>
<
script
>
export
default
{
data
()
{
return
{
tableData
:
[
{
name
:
'
fruit-1
'
,
apple
:
'
apple-10
'
,
banana
:
'
banana-10
'
,
orange
:
'
orange-10
'
},
{
name
:
'
fruit-2
'
,
apple
:
'
apple-20
'
,
banana
:
'
banana-20
'
,
orange
:
'
orange-20
'
}
],
formThead
:
[
'
apple
'
,
'
banana
'
]
}
}
}
</
script
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录