drip-public/iview
6
1
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
Show stats 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> <template>
<Table border :columns="columns5" :data="data5"></Table> <Table :columns="columns7" :data="data6" @on-expand="expand"></Table>
</template> </template>
<script> <script>
import etable from '../components/table.vue';
export default { export default {
components: { etable },
data () { data () {
return { return {
columns5: [ columns7: [
{ {
title: '日期', type: 'expand',
key: 'date', width: 50,
sortable: true render: (h, params) => {
// return h(etable);
return h('div', params.row.name)
}
}, },
{ {
title: '姓名', title: '姓名',
key: 'name', key: 'name',
render: (h, params) => { 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: '地址', title: '地址',
key: 'address' 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: '王小明', name: '王小明',
age: 18, age: 18,
address: '北京市朝阳区芍药居', address: '北京市朝阳区芍药居'
date: '2016-10-03'
}, },
{ {
name: '张小刚', name: '张小刚',
age: 25, age: 25,
address: '北京市海淀区西二旗', address: '北京市海淀区西二旗'
date: '2016-10-01' },
{
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> </script>

27
src/components/table/cell.vue
View file

@ -5,16 +5,22 @@
<Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox> <Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
</template> </template>
<template v-if="renderType === 'normal'"><span v-html="row[column.key]"></span></template> <template v-if="renderType === 'normal'"><span v-html="row[column.key]"></span></template>
<template v-if="renderType === 'expand'">
<div :class="expandCls" @click="toggleExpand">
<Icon type="ios-arrow-right"></Icon>
</div>
</template>
</div> </div>
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue'; import Checkbox from '../checkbox/checkbox.vue';
import { findComponentUpward } from '../../utils/assist'; import { findComponentUpward } from '../../utils/assist';
export default { export default {
name: 'TableCell', name: 'TableCell',
components: { Checkbox }, components: { Icon, Checkbox },
props: { props: {
prefixCls: String, prefixCls: String,
row: Object, row: Object,
@ -23,6 +29,7 @@
index: Number, // _index of data index: Number, // _index of data
checked: Boolean, checked: Boolean,
disabled: Boolean, disabled: Boolean,
expanded: Boolean,
fixed: { fixed: {
type: [Boolean, String], type: [Boolean, String],
default: false default: false
@ -41,14 +48,23 @@
`${this.prefixCls}-cell`, `${this.prefixCls}-cell`,
{ {
[`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'), [`${this.prefixCls}-hidden`]: !this.fixed && this.column.fixed && (this.column.fixed === 'left' || this.column.fixed === 'right'),
[`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false [`${this.prefixCls}-cell-ellipsis`]: this.column.ellipsis || false,
[`${this.prefixCls}-cell-with-expand`]: this.renderType === 'expand'
} }
]; ];
},
expandCls () {
return [
`${this.prefixCls}-cell-expand`,
{
[`${this.prefixCls}-cell-expand-expanded`]: this.expanded
}
]
} }
}, },
methods: { methods: {
compile () { compile () {
if (this.column.render) { if (this.column.render && this.renderType === 'render') {
// 兼容真 Render，后期废弃旧用法 // 兼容真 Render，后期废弃旧用法
let isRealRender = true; let isRealRender = true;
const Table = findComponentUpward(this, 'Table'); const Table = findComponentUpward(this, 'Table');
@ -114,6 +130,9 @@
}, },
toggleSelect () { toggleSelect () {
this.$parent.$parent.toggleSelect(this.index); this.$parent.$parent.toggleSelect(this.index);
},
toggleExpand () {
this.$parent.$parent.toggleExpand(this.index);
} }
}, },
created () { created () {
@ -121,6 +140,8 @@
this.renderType = 'index'; this.renderType = 'index';
} else if (this.column.type === 'selection') { } else if (this.column.type === 'selection') {
this.renderType = 'selection'; this.renderType = 'selection';
} else if (this.column.type === 'expand') {
this.renderType = 'expand';
} else if (this.column.render) { } else if (this.column.render) {
this.renderType = 'render'; this.renderType = 'render';
} else { } else {

37
src/components/table/expand.vue Normal file
View file

@ -0,0 +1,37 @@
<template>
<div ref="cell"></div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'TableExpand',
props: {
row: Object,
render: Function,
index: Number,
},
methods: {
compile () {
if (this.render) {
this.$el.innerHTML = '';
const component = new Vue({
functional: true,
render: (h) => {
return this.render(h, {
row: this.row,
index: this.index
});
}
});
const Cell = component.$mount();
this.$refs.cell.appendChild(Cell.$el);
}
}
},
mounted () {
this.$nextTick(() => {
this.compile();
});
}
};
</script>

29
src/components/table/table-body.vue
View file

@ -4,8 +4,8 @@
<col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)"> <col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
</colgroup> </colgroup>
<tbody :class="[prefixCls + '-tbody']"> <tbody :class="[prefixCls + '-tbody']">
<template v-for="(row, index) in data">
<tr <tr
v-for="(row, index) in data"
:key="row" :key="row"
:class="rowClasses(row._index)" :class="rowClasses(row._index)"
@mouseenter.stop="handleMouseIn(row._index)" @mouseenter.stop="handleMouseIn(row._index)"
@ -22,21 +22,29 @@
:index="row._index" :index="row._index"
:checked="rowChecked(row._index)" :checked="rowChecked(row._index)"
:disabled="rowDisabled(row._index)" :disabled="rowDisabled(row._index)"
:expanded="rowExpanded(row._index)"
></Cell> ></Cell>
</td> </td>
</tr> </tr>
<tr v-if="rowExpanded(row._index)">
<td :colspan="columns.length">
<Expand :row="row" :render="expandRender" :index="row._index"></Expand>
</td>
</tr>
</template>
</tbody> </tbody>
</table> </table>
</template> </template>
<script> <script>
// todo :key="row" // todo :key="row"
import Cell from './cell.vue'; import Cell from './cell.vue';
import Expand from './expand.vue';
import Mixin from './mixin'; import Mixin from './mixin';
export default { export default {
name: 'TableBody', name: 'TableBody',
mixins: [ Mixin ], mixins: [ Mixin ],
components: { Cell }, components: { Cell, Expand },
props: { props: {
prefixCls: String, prefixCls: String,
styleObject: Object, styleObject: Object,
@ -49,6 +57,20 @@
default: false default: false
} }
}, },
computed: {
expandRender () {
let render = function () {
return '';
};
for (let i = 0; i < this.columns.length; i++) {
const column = this.columns[i];
if (column.type && column.type === 'expand') {
if (column.render) render = column.render;
}
}
return render;
}
},
methods: { methods: {
rowClasses (_index) { rowClasses (_index) {
return [ return [
@ -66,6 +88,9 @@
rowDisabled(_index){ rowDisabled(_index){
return this.objData[_index] && this.objData[_index]._isDisabled; return this.objData[_index] && this.objData[_index]._isDisabled;
}, },
rowExpanded(_index){
return this.objData[_index] && this.objData[_index]._isExpanded;
},
rowClsName (_index) { rowClsName (_index) {
return this.$parent.rowClassName(this.objData[_index], _index); return this.$parent.rowClassName(this.objData[_index], _index);
}, },

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

@ -7,7 +7,8 @@
<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 === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template> <template v-if="column.type === 'expand'"></template>
<template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
<template v-else> <template v-else>
<span v-html="renderHeader(column, index)"></span> <span v-html="renderHeader(column, index)"></span>
<span :class="[prefixCls + '-sort']" v-if="column.sortable"> <span :class="[prefixCls + '-sort']" v-if="column.sortable">

21
src/components/table/table.vue
View file

@ -404,6 +404,18 @@
} }
this.$emit('on-selection-change', selection); this.$emit('on-selection-change', selection);
}, },
toggleExpand (_index) {
let data = {};
for (let i in this.objData) {
if (parseInt(i) === _index) {
data = this.objData[i];
}
}
const status = !data._isExpanded;
this.objData[_index]._isExpanded = status;
this.$emit('on-expand', JSON.parse(JSON.stringify(this.cloneData[_index])), status);
},
selectAll (status) { selectAll (status) {
// this.rebuildData.forEach((data) => { // this.rebuildData.forEach((data) => {
// if(this.objData[data._index]._isDisabled){ // if(this.objData[data._index]._isDisabled){
@ -581,9 +593,9 @@
this.data.forEach((row, index) => { this.data.forEach((row, index) => {
const newRow = deepCopy(row);// todo 直接替换 const newRow = deepCopy(row);// todo 直接替换
newRow._isHover = false; newRow._isHover = false;
if(newRow._disabled){ if (newRow._disabled) {
newRow._isDisabled = newRow._disabled; newRow._isDisabled = newRow._disabled;
}else{ } else {
newRow._isDisabled = false; newRow._isDisabled = false;
} }
if (newRow._checked) { if (newRow._checked) {
@ -591,6 +603,11 @@
} else { } else {
newRow._isChecked = false; newRow._isChecked = false;
} }
if (newRow._expanded) {
newRow._isExpanded = newRow._expanded;
} else {
newRow._isExpanded = false;
}
if (newRow._highlight) { if (newRow._highlight) {
newRow._isHighlight = newRow._highlight; newRow._isHighlight = newRow._highlight;
} else { } else {

29
src/styles/components/table.less
View file

@ -145,6 +145,24 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
&-with-expand{
height: 47px;
line-height: 47px;
padding: 0;
text-align: center;
}
&-expand{
cursor: pointer;
transition: transform @transition-time @ease-in-out;
i{
font-size: @font-size-base;
}
&-expanded{
transform: rotate(90deg);
}
}
} }
&-hidden{ &-hidden{
visibility: hidden; visibility: hidden;
@ -184,6 +202,13 @@
height: 60px; height: 60px;
line-height: 60px; line-height: 60px;
} }
.@{table-prefix-cls}-cell-with-expand{
height: 59px;
line-height: 59px;
i{
font-size: @font-size-base+2;
}
}
} }
&-small{ &-small{
@ -197,6 +222,10 @@
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
.@{table-prefix-cls}-cell-with-expand{
height: 39px;
line-height: 39px;
}
} }
&-row-highlight, &-row-highlight,