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

Merge branch '2.0' into table_render

Browse source
This commit is contained in:
anykno 2017-05-30 01:00:16 +08:00 • committed by GitHub
commit 12fd2dc580
19 changed files with 443 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/components/back-top/back-top.vue
View file

@ -67,7 +67,8 @@
this.backTop = window.pageYOffset >= this.height;
},
back () {
scrollTop(window, document.body.scrollTop, 0, this.duration);
const sTop = document.documentElement.scrollTop || document.body.scrollTop;
scrollTop(window, sTop, 0, this.duration);
this.$emit('on-click');
}
}

1
src/components/input/input.vue
View file

@ -37,6 +37,7 @@
:readonly="readonly"
:name="name"
:value="value"
:autofocus="autofocus"
@keyup.enter="handleEnter"
@focus="handleFocus"
@blur="handleBlur"

2
src/components/select/select.vue
View file

@ -155,6 +155,8 @@
if (!this.model.length) {
status = true;
}
} else if( this.model === null){
status = true;
}
return status;

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

@ -4,18 +4,25 @@
<template v-if="renderType === 'selection'">
<Checkbox :value="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
</template>
<template v-if="renderType === 'html'"><span v-html="row[column.key]"></span></template>
<template v-if="renderType === 'normal'"><span>{{row[column.key]}}</span></template>
<template v-if="renderType === 'expand'">
<div :class="expandCls" @click="toggleExpand">
<Icon type="ios-arrow-right"></Icon>
</div>
</template>
</div>
</template>
<script>
import Vue from 'vue';
import Icon from '../icon/icon.vue';
import Checkbox from '../checkbox/checkbox.vue';
import { findComponentUpward } from '../../utils/assist';
export default {
name: 'TableCell',
components: { Checkbox },
components: { Icon, Checkbox },
props: {
prefixCls: String,
row: Object,
@ -24,6 +31,7 @@
index: Number, // _index of data
checked: Boolean,
disabled: Boolean,
expanded: Boolean,
fixed: {
type: [Boolean, String],
default: false
@ -42,20 +50,30 @@
`${this.prefixCls}-cell`,
{
[`${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: {
compile () {
if (this.column.render) {
if (this.column.render && this.renderType === 'render') {
// 兼容真 Render，后期废弃旧用法
let isRealRender = true;
const Table = findComponentUpward(this, 'Table');
if (Table.context) isRealRender = false;
if (isRealRender) {
this.$el.innerHTML = '';
const component = new Vue({
functional: true,
render: (h) => {
@ -114,6 +132,9 @@
},
toggleSelect () {
this.$parent.$parent.toggleSelect(this.index);
},
toggleExpand () {
this.$parent.$parent.toggleExpand(this.index);
}
},
created () {
@ -123,6 +144,8 @@
this.renderType = 'selection';
} else if (this.column.type === 'html') {
this.renderType = 'html';
} else if (this.column.type === 'expand') {
this.renderType = 'expand';
} else if (this.column.render) {
this.renderType = 'render';
} 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>

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

@ -4,39 +4,47 @@
<col v-for="(column, index) in columns" :width="setCellWidth(column, index, false)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<tr
v-for="(row, index) in data"
:key="row"
:class="rowClasses(row._index)"
@mouseenter.stop="handleMouseIn(row._index)"
@mouseleave.stop="handleMouseOut(row._index)"
@click.stop="clickCurrentRow(row._index)"
@dblclick.stop="dblclickCurrentRow(row._index)">
<td v-for="column in columns" :class="alignCls(column, row)">
<Cell
:fixed="fixed"
:prefix-cls="prefixCls"
:row="row"
:column="column"
:natural-index="index"
:index="row._index"
:checked="rowChecked(row._index)"
:disabled="rowDisabled(row._index)"
<template v-for="(row, index) in data">
<tr
:key="row"
:class="rowClasses(row._index)"
@mouseenter.stop="handleMouseIn(row._index)"
@mouseleave.stop="handleMouseOut(row._index)"
@click.stop="clickCurrentRow(row._index)"
@dblclick.stop="dblclickCurrentRow(row._index)">
<td v-for="column in columns" :class="alignCls(column, row)">
<Cell
:fixed="fixed"
:prefix-cls="prefixCls"
:row="row"
:column="column"
:natural-index="index"
:index="row._index"
:checked="rowChecked(row._index)"
:disabled="rowDisabled(row._index)"
:expanded="rowExpanded(row._index)"
></Cell>
</td>
</tr>
</td>
</tr>
<tr v-if="rowExpanded(row._index)">
<td :colspan="columns.length" :class="prefixCls + '-expanded-cell'">
<Expand :row="row" :render="expandRender" :index="row._index"></Expand>
</td>
</tr>
</template>
</tbody>
</table>
</template>
<script>
// todo :key="row"
import Cell from './cell.vue';
import Expand from './expand.vue';
import Mixin from './mixin';
export default {
name: 'TableBody',
mixins: [ Mixin ],
components: { Cell },
components: { Cell, Expand },
props: {
prefixCls: String,
styleObject: Object,
@ -49,6 +57,20 @@
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: {
rowClasses (_index) {
return [
@ -66,6 +88,9 @@
rowDisabled(_index){
return this.objData[_index] && this.objData[_index]._isDisabled;
},
rowExpanded(_index){
return this.objData[_index] && this.objData[_index]._isExpanded;
},
rowClsName (_index) {
return this.$parent.rowClassName(this.objData[_index], _index);
},

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

@ -7,7 +7,8 @@
<tr>
<th v-for="(column, index) in columns" :class="alignCls(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>
<span v-html="renderHeader(column, index)"></span>
<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);
},
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) {
// this.rebuildData.forEach((data) => {
// if(this.objData[data._index]._isDisabled){
@ -581,9 +593,9 @@
this.data.forEach((row, index) => {
const newRow = deepCopy(row);// todo 直接替换
newRow._isHover = false;
if(newRow._disabled){
if (newRow._disabled) {
newRow._isDisabled = newRow._disabled;
}else{
} else {
newRow._isDisabled = false;
}
if (newRow._checked) {
@ -591,6 +603,11 @@
} else {
newRow._isChecked = false;
}
if (newRow._expanded) {
newRow._isExpanded = newRow._expanded;
} else {
newRow._isExpanded = false;
}
if (newRow._highlight) {
newRow._isHighlight = newRow._highlight;
} else {

2
src/components/transfer/list.vue
View file

@ -2,7 +2,7 @@
<div :class="classes" :style="listStyle">
<div :class="prefixCls + '-header'">
<Checkbox :value="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
<span>{{ title }}</span>
<span :class="prefixCls + '-header-title'" @click="toggleSelectAll(!checkedAll)">{{ title }}</span>
<span :class="prefixCls + '-header-count'">{{ count }}</span>
</div>
<div :class="bodyClasses">