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

Table expand support set column header, and close #1299

Browse source
This commit is contained in:
梁灏 2017-09-03 11:40:48 +08:00
parent 6c97e57a80
commit 8a392d25fc
3 changed files with 97 additions and 131 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
examples/components/test.vue
View file

@ -1,20 +1,39 @@
<template> <template>
<Dropdown transfer> <div>
<a href="javascript:void(0)"> <Row class="expand-row">
下拉菜单 <Col span="8">
<Icon type="arrow-down-b"></Icon> <span class="expand-key">职业：</span>
</a> <span class="expand-value">{{ row.job }}</span>
<Dropdown-menu slot="list"> </Col>
<Dropdown-item>驴打滚</Dropdown-item> <Col span="8">
<Dropdown-item>炸酱面</Dropdown-item> <span class="expand-key">兴趣：</span>
<Dropdown-item disabled>豆汁儿</Dropdown-item> <span class="expand-value">{{ row.interest }}</span>
<Dropdown-item>冰糖葫芦</Dropdown-item> </Col>
<Dropdown-item divided>北京烤鸭</Dropdown-item> <Col span="8">
</Dropdown-menu> <span class="expand-key">生日：</span>
</Dropdown> <span class="expand-value">{{ row.birthday }}</span>
</Col>
</Row>
<Row>
<Col span="8">
<span class="expand-key">最喜欢的书：</span>
<span class="expand-value">《{{ row.book }}》</span>
</Col>
<Col span="8">
<span class="expand-key">最喜欢的电影：</span>
<span class="expand-value">{{ row.movie }}</span>
</Col>
<Col span="8">
<span class="expand-key">最喜欢的音乐：</span>
<span class="expand-value">{{ row.music }}</span>
</Col>
</Row>
</div>
</template> </template>
<script> <script>
export default { export default {
props: {
} row: Object
</script> }
};
</script>

172
examples/routers/table.vue
View file

@ -1,144 +1,88 @@
<template> <template>
<div> <Table :columns="columns10" :data="data9"></Table>
<Table
width="500"
height="200"
border
highlight-row
:columns="columns2"
@on-selection-change="change2"
:data="data3"></Table>
<Button @click="addData">添加数据</Button>
</div>
</template> </template>
<script> <script>
import test from '../components/test.vue'; import expandRow from '../components/tableExpand.vue';
export default { export default {
components: { expandRow },
data () { data () {
return { return {
columns2: [ columns10: [
// {
// type: 'selection',
// width: 60,
// align: 'center'
// },
{ {
title: '姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名', type: 'expand',
key: 'name', width: 100,
width: 200, title: '展',
// sortable: true, renderHeader (h) {
// fixed: 'right', return h('i', '展开')
},
render: (h, params) => { render: (h, params) => {
return h('div', [ return h(expandRow, {
h('Button', { props: {
props: { row: params.row
type: 'primary', }
size: 'small' })
},
on: {
click: this.edit
},
}, '修改')
]);
} }
}, },
{ {
title: '年龄', title: '姓名',
key: 'age', key: 'name'
sortable: true,
// sortType: 'asc',
width: 200
}, },
{ {
title: '省份', title: '年龄',
key: 'province', key: 'age'
sortable: true,
// fixed: 'right',
width: 200
}, },
// { {
// title: '市区', title: '地址',
// key: 'city', key: 'address'
// width: 100 }
// },
// {
// title: '地址',
// key: 'address',
// width: 200
// },
// {
// title: '邮编',
// key: 'zip',
// width: 100
// },
// {
// title: '操作',
// key: 'action',
// fixed: 'right',
// width: 120,
// render: (h, params) => {
// return h(test);
// }
// }
], ],
data3: [ data9: [
{ {
name: '王小明', name: '王小明',
age: 18, age: 18,
address: '北京市朝阳区芍药居', address: '北京市朝阳区芍药居',
province: '北京市', job: '数据工程师',
city: '朝阳区', interest: '羽毛球',
zip: 100000 birthday: '1991-05-14',
book: '乔布斯传',
movie: '致命魔术',
music: 'I Cry'
}, },
{ {
name: '张小刚', name: '张小刚',
age: 25, age: 25,
address: '北京市海淀区西二旗', address: '北京市海淀区西二旗',
province: '北京市', job: '数据科学家',
city: '海淀区', interest: '排球',
zip: 100000 birthday: '1989-03-18',
book: '我的奋斗',
movie: '罗马假日',
music: 'My Heart Will Go On'
}, },
// { {
// name: '李小红', name: '李小红',
// age: 30, age: 30,
// address: '上海市浦东新区世纪大道', address: '上海市浦东新区世纪大道',
// province: '上海市', job: '数据产品经理',
// city: '浦东新区', interest: '网球',
// zip: 100000 birthday: '1992-01-31',
// }, book: '赢',
// { movie: '乔布斯',
// name: '周小伟', music: 'Don’t Cry'
// age: 26, },
// address: '深圳市南山区深南大道', {
// province: '广东', name: '周小伟',
// city: '南山区', age: 26,
// zip: 100000 address: '深圳市南山区深南大道',
// } job: '数据分析师',
interest: '桌球，跑步',
birthday: '1988-7-25',
book: '红楼梦',
movie: '倩女幽魂',
music: '演员'
}
] ]
} }
},
methods: {
change1 (d, l) {
// console.log(d)
// console.log(l)
},
change2 (d, l) {
console.log(d);
console.log(l);
},
addData () {
this.data3.push({
name: '周小伟',
age: 26,
address: '深圳市南山区深南大道',
province: '广东',
city: '南山区',
zip: 100000
})
},
edit () {
}
} }
} }
</script> </script>

5
src/components/table/table-head.vue
View file

@ -7,7 +7,10 @@
<tr> <tr>
<th v-for="(column, index) in columns" :class="alignCls(column)"> <th v-for="(column, index) in columns" :class="alignCls(column)">
<div :class="cellClasses(column)"> <div :class="cellClasses(column)">
<template v-if="column.type === 'expand'"></template> <template v-if="column.type === 'expand'">
<span v-if="!column.renderHeader">{{ column.title || '' }}</span>
<render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
</template>
<template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template> <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
<template v-else> <template v-else>
<span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span> <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span>