drip-public/iview
6
1
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
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>

2
examples/routers/notice.vue
View file

@ -14,7 +14,7 @@
mounted () {
this.$Notice.config({
top: 150,
duration: 3
duration: 30
});
}
}

86
examples/routers/table.vue
View file

@ -1,37 +1,39 @@
<template>
<div>
<Table border :columns="columns7" :data="data6"></Table>
<Button @click="handleAdd"> + 1</Button>
</div>
<Table border :columns="columns7" :data="data6" @on-expand="expand"></Table>
</template>
<script>
import abc from '../components/test.vue';
import etable from '../components/table.vue';
export default {
components: { abc },
components: { etable },
data () {
return {
data1: 1,
self: this,
columns7: [
{
type: 'expand',
width: 50,
render: (h, params) => {
// return h(etable);
return h('div', params.row.name)
}
},
{
title: '姓名',
key: 'name',
// render (row, column, index) {
// return `<abc></abc>`;
// }
render: (h, row, column, index) => {
render: (h, params) => {
return h('div', [
h('Button',{
on: {
click: this.handleClick
h('Icon', {
props: {
type: 'person'
}
}, 'hello')
])
}),
h('strong', params.row.name)
]);
}
},
{
title: '年龄',
key: 'age'
key: 'age',
sortable: true
},
{
title: '地址',
@ -42,9 +44,35 @@
key: 'action',
width: 150,
align: 'center',
// render (row, column, index) {
// return `<i-button type="primary" size="small" @click="show(${index})">查看</i-button> <i-button type="error" size="small" @click="remove(${index})">删除</i-button>`;
// }
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)
}
}
}, '删除')
]);
}
}
],
data6: [
@ -61,7 +89,8 @@
{
name: '李小红',
age: 30,
address: '上海市浦东新区世纪大道'
address: '上海市浦东新区世纪大道',
_expanded: true
},
{
name: '周小伟',
@ -71,11 +100,6 @@
]
}
},
computed: {
ttt () {
return this.data1 + 1;
}
},
methods: {
show (index) {
this.$Modal.info({
@ -86,11 +110,9 @@
remove (index) {
this.data6.splice(index, 1);
},
handleAdd () {
this.data1++;
},
handleClick () {
this.$Message.info('111')
expand (row, s) {
// console.log(row);
// console.log(s);
}
}
}

2
examples/routers/transfer.vue
View file

@ -178,7 +178,7 @@
setTimeout(function() {
console.log('--1');
// _this.data1 = null;
_this.data1 = _this.getMockData1();
// _this.data1 = _this.getMockData1();
console.log('-fetch-', _this.data1);
}, 1500);

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>

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)">
</colgroup>
<tbody :class="[prefixCls + '-tbody']">
<template v-for="(row, index) in data">
<tr
v-for="(row, index) in data"
:key="row"
:class="rowClasses(row._index)"
@mouseenter.stop="handleMouseIn(row._index)"
@ -22,21 +22,29 @@
:index="row._index"
:checked="rowChecked(row._index)"
:disabled="rowDisabled(row._index)"
:expanded="rowExpanded(row._index)"
></Cell>
</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">

96
src/locale/lang/ru-RU.js Normal file
View file

@ -0,0 +1,96 @@
export default {
i: {
select: {
placeholder: 'Выбрать',
noMatch: 'Нет соответствующих данных',
loading: 'Загрузка'
},
table: {
noDataText: 'Нет данных',
noFilteredDataText: 'Нет данных по фильтру',
confirmFilter: 'Подтвердить',
resetFilter: 'Сброс',
clearFilter: 'Все'
},
datepicker: {
selectDate: 'Выбрать дату',
selectTime: 'Выбрать время',
startTime: 'Начальное время',
endTime: 'Конечное время',
clear: 'Очистить',
ok: 'OK',
month: '',
month1: 'Январь',
month2: 'Февраль',
month3: 'Март',
month4: 'Апрель',
month5: 'Май',
month6: 'Июнь',
month7: 'Июль',
month8: 'Август',
month9: 'Сентябрь',
month10: 'Октябрь',
month11: 'Ноябрь',
month12: 'Декабрь',
year: '',
weeks: {
sun: 'Вс',
mon: 'Пн',
tue: 'Вт',
wed: 'Ср',
thu: 'Чт',
fri: 'Пт',
sat: 'Сб'
},
months: {
m1: 'Янв',
m2: 'Фев',
m3: 'Мар',
m4: 'Апр',
m5: 'Май',
m6: 'Июн',
m7: 'Июл',
m8: 'Авг',
m9: 'Сен',
m10: 'Окт',
m11: 'Ноя',
m12: 'Дек'
}
},
transfer: {
titles: {
source: 'Источник',
target: 'Цель'
},
filterPlaceholder: 'Искать здесь',
notFoundText: 'Не Найдено'
},
modal: {
okText: 'OK',
cancelText: 'Отменить'
},
poptip: {
okText: 'OK',
cancelText: 'Отменить'
},
page: {
prev: 'Пред. страница',
next: 'След. страница',
total: 'Всего',
item: 'пункт',
items: 'пункты',
prev5: 'Пред. 5 страниц',
next5: 'След. 5 страниц',
page: '/page',
goto: 'Идти к',
p: ''
},
rate: {
star: 'Звезда',
stars: 'Звезды'
},
tree: {
emptyText: 'Нет данных'
}
}
};

4
src/styles/components/notice.less
View file

@ -50,6 +50,7 @@
white-space: nowrap;
}
&-with-desc &-title{
font-weight: bold;
margin-bottom: 8px;
}
&-with-desc&-with-icon &-title{
@ -58,7 +59,8 @@
&-desc {
font-size: 12px;
color: @legend-color;
//color: @legend-color;
color: @text-color;
text-align: justify;
line-height: 1.5;
}

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

@ -145,6 +145,24 @@
overflow: hidden;
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{
visibility: hidden;
@ -156,6 +174,11 @@
vertical-align: middle;
}
td&-expanded-cell{
padding: 20px 50px;
background: @table-thead-bg;
}
&-stripe &-body,
&-stripe &-fixed-body
{
@ -184,6 +207,13 @@
height: 60px;
line-height: 60px;
}
.@{table-prefix-cls}-cell-with-expand{
height: 59px;
line-height: 59px;
i{
font-size: @font-size-base+2;
}
}
}
&-small{
@ -197,6 +227,10 @@
height: 40px;
line-height: 40px;
}
.@{table-prefix-cls}-cell-with-expand{
height: 39px;
line-height: 39px;
}
}
&-row-highlight,

4
src/styles/components/transfer.less
View file

@ -31,6 +31,10 @@
left: 0;
width: 100%;
&-title{
cursor: pointer;
}
& > span{
padding-left: 4px;
}

24
src/styles/custom.less
View file

@ -3,25 +3,25 @@
@css-prefix-iconfont : ivu-icon;
// Color
@primary-color : #3399ff;
@primary-color : #2d8cf0;
@info-color : #2db7f5;
@success-color : #00cc66;
@success-color : #19be6b;
@warning-color : #ff9900;
@error-color : #ff3300;
@link-color : #3399ff;
@error-color : #ed3f14;
@link-color : #2D8cF0;
@link-hover-color : tint(@link-color, 20%);
@link-active-color : shade(@link-color, 5%);
@selected-color : fade(@primary-color, 90%);
@tooltip-color : #fff;
@subsidiary-color : #9ea7b4;
@subsidiary-color : #80848f;
@rate-star-color : #f5a623;
// Base
@body-background : #fff;
@font-family : "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
@code-family : Consolas,Menlo,Courier,monospace;
@title-color : #464c5b;
@text-color : #657180;
@title-color : #1c2438;
@text-color : #495060;
@font-size-base : 14px;
@font-size-small : 12px;
@line-height-base : 1.5;
@ -31,16 +31,16 @@
@cursor-disabled : not-allowed;
// Border color
@border-color-base : #d7dde4; // outside
@border-color-split : #e3e8ee; // inside
@border-color-base : #dddee1; // outside
@border-color-split : #e9eaec; // inside
// Background color
@background-color-base : #f7f7f7; // base
@background-color-select-hover: @input-disabled-bg;
@tooltip-bg : rgba(70, 76, 91, .9);
@head-bg : #f9fafc;
@table-thead-bg : #f5f7f9;
@table-td-stripe-bg : #f5f7f9;
@table-thead-bg : #f8f8f9;
@table-td-stripe-bg : #f8f8f9;
@table-td-hover-bg : #ebf7ff;
@table-td-highlight-bg : #ebf7ff;
@menu-dark-active-bg : #313540;
@ -66,7 +66,7 @@
@btn-border-radius-small: 3px;
@btn-group-border : shade(@primary-color, 5%);
@btn-disable-color : #c3cbd6;
@btn-disable-color : #bbbec4;
@btn-disable-bg : @background-color-base;
@btn-disable-border : @border-color-base;

2
src/styles/mixins/button.less
View file

@ -133,7 +133,7 @@
line-height: @line-height-base;
user-select: none;
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
transform: translate3d(0, 0, 0);
//transform: translate3d(0, 0, 0);
//transition: all @transition-time linear;
transition: color @transition-time linear, background-color @transition-time linear, border @transition-time linear;