diff --git a/src/components/table/mixin.js b/src/components/table/mixin.js
index 6223dc58..02ed257b 100644
--- a/src/components/table/mixin.js
+++ b/src/components/table/mixin.js
@@ -1,8 +1,9 @@
export default {
methods: {
- alignCls (column) {
+ alignCls (column, type) {
return [
{
+ [`${column.className}`]: column.className && type === 'body',
[`${this.prefixCls}-column-${column.align}`]: column.align,
[`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right'))
}
diff --git a/src/components/table/table-body.vue b/src/components/table/table-body.vue
index bb736857..287ba5ef 100644
--- a/src/components/table/table-body.vue
+++ b/src/components/table/table-body.vue
@@ -11,7 +11,7 @@
@mouseleave.stop="handleMouseOut(row._index)"
@click.stop="clickCurrentRow(row._index)"
@dblclick.stop="dblclickCurrentRow(row._index)">
- <td v-for="column in columns" :class="alignCls(column)">
+ <td v-for="column in columns" :class="alignCls(column, 'body')">
<Cell
:fixed="fixed"
:prefix-cls="prefixCls"
diff --git a/src/components/table/table-head.vue b/src/components/table/table-head.vue
index 46147fda..1906c66a 100644
--- a/src/components/table/table-head.vue
+++ b/src/components/table/table-head.vue
@@ -5,7 +5,7 @@
</colgroup>
<thead>
<tr>
- <th v-for="(index, column) in columns" :class="alignCls(column)">
+ <th v-for="(index, column) in columns" :class="alignCls(column, 'head')">
<div :class="cellClasses(column)">
<template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template>
<template v-else>
diff --git a/test/routers/cascader.vue b/test/routers/cascader.vue
index b0c62e25..9a289661 100644
--- a/test/routers/cascader.vue
+++ b/test/routers/cascader.vue
@@ -1,10 +1,19 @@
<template>
- <Cascader :data="data" change-on-select></Cascader>
+ <div v-for="item in list">
+ <Cascader :data="data" change-on-select :render-format="format"></Cascader>
+ </div>
+ <i-button @click="add">add</i-button>
+ <i-button @click="remove">remove</i-button>
</template>
<script>
export default {
data () {
return {
+ list: [
+ {
+ a: 1
+ }
+ ],
data: [{
value: 'beijing',
label: '北京',
@@ -32,7 +41,7 @@
children: [
{
value: 'fuzimiao',
- label: '夫子庙',
+ label: '夫子庙'
}
]
},
@@ -42,17 +51,30 @@
children: [
{
value: 'zhuozhengyuan',
- label: '拙政园',
+ label: '拙政园'
},
{
value: 'shizilin',
- label: '狮子林',
+ label: '狮子林'
}
]
}
- ],
+ ]
}]
}
+ },
+ methods: {
+ add () {
+ this.list.push({
+ a: 2
+ })
+ },
+ remove () {
+ this.list.splice(0, 1);
+ },
+ format (labels) {
+ return labels.join(' - ');
+ }
}
}
</script>
diff --git a/test/routers/more.vue b/test/routers/more.vue
index 1d9b97d7..fa1445a1 100644
--- a/test/routers/more.vue
+++ b/test/routers/more.vue
@@ -4,10 +4,13 @@
}
</style>
<template>
- <row>
- <i-col span="0">123</i-col>
- <i-col span="24">24</i-col>
- </row>
+ <Tabs active-key="key1">
+ <Tab-pane label="标签一" key="key1">
+ <Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker>
+ </Tab-pane>
+ <Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane>
+ <Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane>
+ </Tabs>
</template>
<script>
export default {
diff --git a/test/routers/table.vue b/test/routers/table.vue
index 22cfd880..45666a71 100644
--- a/test/routers/table.vue
+++ b/test/routers/table.vue
@@ -1,204 +1,46 @@
+<style>
+ /*.ivu-table .demo-table-info-row td{*/
+ /*background-color: #2db7f5;*/
+ /*color: #fff;*/
+ /*}*/
+ /*.ivu-table .demo-table-error-row td{*/
+ /*background-color: #ff6600;*/
+ /*color: #fff;*/
+ /*}*/
+ .ivu-table .table-age-col{
+ background: #ff6600;
+ }
+ .ivu-table .table-name-col{
+ background: #2db7f5;
+ }
+ .ivu-table .table-address-col{
+ background: #187;
+ }
+</style>
<template>
- <i-table border :columns="columns1" :data="data1"></i-table>
- <!--<i-table border height="200" :columns="columns1" :data="data2"></i-table>-->
- <!--<i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>-->
- <!--<i-button @click="changeFilter">改变filter</i-button>-->
- <!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>-->
- <!--<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis-->
- <!--<i-table-->
- <!--border-->
- <!--:columns="columns6"-->
- <!--width="500"-->
- <!--:data="[]"-->
- <!--:highlight-row="true"-->
- <!--@on-current-change="onCurrentChange"-->
- <!--@on-dblclick="onDblclick">-->
- <!--</i-table>-->
-
- <!--<br/>-->
-
- <!--<i-table-->
- <!--border-->
- <!--:columns="columns7"-->
- <!--:data="[]"-->
- <!--no-data-text="No Data"-->
- <!--:highlight-row="true"-->
- <!--@on-current-change="onCurrentChange"-->
- <!--@on-dblclick="onDblclick">-->
- <!--</i-table>-->
-
- <!--<br/>-->
-
- <!--<i-table-->
- <!--border-->
- <!--:columns="columns7"-->
- <!--:data="[]"-->
- <!--size="small"-->
- <!--:highlight-row="true"-->
- <!--@on-current-change="onCurrentChange"-->
- <!--@on-dblclick="onDblclick">-->
- <!--</i-table>-->
-
- <!--<br/>-->
-
- <!--<i-table-->
- <!--border-->
- <!--:columns="columns7"-->
- <!--:data="[]"-->
- <!--size="large"-->
- <!--:highlight-row="true"-->
- <!--@on-current-change="onCurrentChange"-->
- <!--@on-dblclick="onDblclick">-->
- <!--</i-table>-->
-
- <!--<br/>-->
-
- <!--<i-table-->
- <!--border-->
- <!--:columns="columns7"-->
- <!--:data="data5"-->
- <!--:highlight-row="true"-->
- <!--@on-current-change="onCurrentChange"-->
- <!--@on-dblclick="onDblclick">-->
- <!--</i-table>-->
-
- <!--<br/>-->
-
- <!--<i-table-->
- <!--border-->
- <!--:columns="columns6"-->
- <!--width="500"-->
- <!--:data="data5"-->
- <!--:highlight-row="true"-->
- <!--@on-current-change="onCurrentChange"-->
- <!--@on-dblclick="onDblclick">-->
- <!--</i-table>-->
+ <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
</template>
<script>
export default {
data () {
return {
- columns2: [
+ columns1: [
{
title: '姓名',
key: 'name',
- width: 100,
- fixed: 'left'
+ fixed: 'right',
+ className: 'table-name-col'
},
{
title: '年龄',
key: 'age',
- width: 100
- },
- {
- title: '省份',
- key: 'province',
- width: 100
- },
- {
- title: '市区',
- key: 'city',
- width: 100
+ fixed: 'right',
+ className: 'table-age-col'
},
{
title: '地址',
key: 'address',
- fixed: 'right',
- width: 200
- },
- {
- title: '邮编',
- key: 'zip',
- width: 100
- },
- {
- title: '操作',
- key: 'action',
-// fixed: 'right',
- width: 120,
- render () {
- return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`;
- }
- }
- ],
- data4: [
- {
- 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
- },
- {
- 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
- }
- ],
- columns1: [
- {
- title: '姓名',
- key: 'name'
- },
- {
- title: '年龄',
- key: 'age'
- },
- {
- title: '地址',
- key: 'address'
+ className: 'table-address-col'
}
],
data1: [
@@ -222,206 +64,17 @@
age: 26,
address: '深圳市南山区深南大道'
}
- ],
- data2: [
- {
- name: '王小明',
- age: 18,
- address: '北京市朝阳区芍药居'
- },
- {
- name: '张小刚',
- age: 25,
- address: '北京市海淀区西二旗'
- },
- {
- name: '李小红',
- age: 30,
- address: '上海市浦东新区世纪大道'
- },
- {
- name: '周小伟',
- age: 26,
- address: '深圳市南山区深南大道'
- },
- {
- name: '王小明',
- age: 18,
- address: '北京市朝阳区芍药居'
- },
- {
- name: '张小刚',
- age: 25,
- address: '北京市海淀区西二旗'
- },
- {
- name: '李小红',
- age: 30,
- address: '上海市浦东新区世纪大道'
- },
- {
- name: '周小伟',
- age: 26,
- address: '深圳市南山区深南大道'
- }
- ],
- columns6: [
- {
- type: 'selection',
- width: 60,
- align: 'center',
- width: 100
- },
- {
- title: '日期',
- key: 'date',
- fixed: 'left',
- width: 100
- },
- {
- title: '姓名',
- key: 'name',
- width: 100
- },
- {
- title: '年龄',
- key: 'age',
- width: 100,
- filters: [
- {
- label: '大于25岁',
- value: 1
- },
- {
- label: '小于25岁',
- value: 2
- }
- ],
- filterMultiple: false,
- filterMethod (value, row) {
- if (value === 1) {
- return row.age > 25;
- } else if (value === 2) {
- return row.age < 25;
- }
- }
- },
- {
- title: '地址',
- key: 'address',
- width: 100,
- filters: [
- {
- label: '北京',
- value: '北京'
- },
- {
- label: '上海',
- value: '上海'
- },
- {
- label: '深圳',
- value: '深圳'
- }
- ],
- filterMethod (value, row) {
- return row.address.indexOf(value) > -1;
- }
- },
- {
- title: '长文本',
- key: 'longText',
- width: 100,
- ellipsis: false
- }
- ],
- columns7: [
- {
- type: 'selection',
- width: 60,
- align: 'center'
- },
- {
- title: '日期',
- key: 'date'
- },
- {
- title: '姓名',
- key: 'name'
- },
- {
- title: '地址',
- key: 'address',
- filters: [
- {
- label: '北京',
- value: '北京'
- },
- {
- label: '上海',
- value: '上海'
- },
- {
- label: '深圳',
- value: '深圳'
- }
- ],
- filterMethod (value, row) {
- return row.address.indexOf(value) > -1;
- }
- },
- {
- title: '长文本',
- key: 'longText',
- ellipsis: false
- }
- ],
- data5: [
- {
- name: '王小明',
- age: 18,
- address: '北京市朝阳区芍药居',
- date: '2016-10-03',
- longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
- },
- {
- name: '张小刚',
- age: 25,
- address: '北京市海淀区西二旗',
- date: '2016-10-01',
- longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
- },
- {
- name: '李小红',
- age: 30,
- address: '上海市浦东新区世纪大道',
- date: '2016-10-02',
- longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
- }
- ],
- currentRow: null
+ ]
}
},
methods: {
- changeFilter () {
- this.columns6[2].filters = [
- {
- label: '小于25岁',
- value: 2
- }
- ]
- },
- switchCellEllipsis (status) {
- this.columns6[5].ellipsis = status
- },
- onClick (data) {
- window.alert('Click ' + data.name)
- },
- onCurrentChange (data) {
- this.currentRow = data
- },
- onDblclick (data) {
- window.alert('Double Click ' + data.name)
+ rowClassName (row, index) {
+ if (index === 1) {
+ return 'demo-table-info-row';
+ } else if (index === 3) {
+ return 'demo-table-error-row';
+ }
+ return '';
}
}
}