drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Table support expand

Browse source
This commit is contained in:
Aresn 2017-05-27 15:13:10 +08:00
parent df64fd36bd
commit 08fd628d1f
8 changed files with 339 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

101
examples/components/table.vue Normal file
View file

@ -0,0 +1,101 @@
<template>
<Table width="550" border :columns="columns2" :data="data3"></Table>
</template>
<script>
export default {
name: 'etable',
data () {
return {
columns2: [
{
title: '姓名',
key: 'name',
width: 100,
fixed: 'left'
},
{
title: '年龄',
key: 'age',
width: 100
},
{
title: '省份',
key: 'province',
width: 100
},
{
title: '市区',
key: 'city',
width: 100
},
{
title: '地址',
key: 'address',
width: 200
},
{
title: '邮编',
key: 'zip',
width: 100
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 120,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, '查看'),
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, '编辑')
]);
}
}
],
data3: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
province: '北京市',
city: '朝阳区',
zip: 100000
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
province: '北京市',
city: '海淀区',
zip: 100000
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道',
province: '上海市',
city: '浦东新区',
zip: 100000
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
province: '广东',
city: '南山区',
zip: 100000
}
]
}
}
}
</script>

92
examples/routers/table.vue
View file

@ -1,21 +1,33 @@
<template>
<Table border :columns="columns5" :data="data5"></Table>
<Table :columns="columns7" :data="data6" @on-expand="expand"></Table>
</template>
<script>
import etable from '../components/table.vue';
export default {
components: { etable },
data () {
return {
columns5: [
columns7: [
{
title: '日期',
key: 'date',
sortable: true
type: 'expand',
width: 50,
render: (h, params) => {
// return h(etable);
return h('div', params.row.name)
}
},
{
title: '姓名',
key: 'name',
render: (h, params) => {
return h('div', params.row.name);
return h('div', [
h('Icon', {
props: {
type: 'person'
}
}),
h('strong', params.row.name)
]);
}
},
{
@ -26,23 +38,81 @@
{
title: '地址',
key: 'address'
},
{
title: '操作',
key: 'action',
width: 150,
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.show(params.index)
}
}
}, '查看'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '删除')
]);
}
}
],
data5: [
data6: [
{
name: '王小明',
age: 18,
address: '北京市朝阳区芍药居',
date: '2016-10-03'
address: '北京市朝阳区芍药居'
},
{
name: '张小刚',
age: 25,
address: '北京市海淀区西二旗',
date: '2016-10-01'
address: '北京市海淀区西二旗'
},
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
},
{
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道'
}
]
}
},
methods: {
show (index) {
this.$Modal.info({
title: '用户信息',
content: `姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`
})
},
remove (index) {
this.data6.splice(index, 1);
},
expand (row, s) {
// console.log(row);
// console.log(s);
}
}
}
</script>