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

Table data support to set cell className

Browse source 
Table data support to set cell className
This commit is contained in:
梁灏 2017-01-10 18:36:13 +08:00
parent f9f1865ca5
commit c211f71778
3 changed files with 39 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/table/mixin.js
View file

@ -1,9 +1,14 @@
export default { export default {
methods: { methods: {
alignCls (column, type) { alignCls (column, type, row = {}) {
let cellClassName = '';
if (row.cellClassName && column.key && row.cellClassName[column.key]) {
cellClassName = row.cellClassName[column.key];
}
return [ return [
{ {
[`${column.className}`]: column.className && type === 'body', [`${cellClassName}`]: cellClassName, // cell className
[`${column.className}`]: column.className && type === 'body', // column className
[`${this.prefixCls}-column-${column.align}`]: column.align, [`${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')) [`${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'))
} }

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

@ -11,7 +11,7 @@
@mouseleave.stop="handleMouseOut(row._index)" @mouseleave.stop="handleMouseOut(row._index)"
@click.stop="clickCurrentRow(row._index)" @click.stop="clickCurrentRow(row._index)"
@dblclick.stop="dblclickCurrentRow(row._index)"> @dblclick.stop="dblclickCurrentRow(row._index)">
<td v-for="column in columns" :class="alignCls(column, 'body')"> <td v-for="column in columns" :class="alignCls(column, 'body', row)">
<Cell <Cell
:fixed="fixed" :fixed="fixed"
:prefix-cls="prefixCls" :prefix-cls="prefixCls"

38
test/routers/table.vue
View file

@ -16,6 +16,18 @@
.ivu-table .table-address-col{ .ivu-table .table-address-col{
background: #187; background: #187;
} }
.ivu-table .class-cell-age{
background: #187;
color: #fff;
}
.ivu-table .class-cell-address{
background: #f60;
color: #fff;
}
.ivu-table .class-cell-name{
background: #2db7f5;
color: #fff;
}
</style> </style>
<template> <template>
<i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table> <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>
@ -25,29 +37,38 @@
data () { data () {
return { return {
columns1: [ columns1: [
{
type: 'selection',
width: 60,
align: 'center'
},
{ {
title: '姓名', title: '姓名',
key: 'name', key: 'name',
fixed: 'right', // fixed: 'right',
className: 'table-name-col' // className: 'table-name-col'
}, },
{ {
title: '年龄', title: '年龄',
key: 'age', key: 'age',
fixed: 'right', // fixed: 'right',
className: 'table-age-col' // className: 'table-age-col'
}, },
{ {
title: '地址', title: '地址',
key: 'address', key: 'address',
className: 'table-address-col' // className: 'table-address-col'
} }
], ],
data1: [ data1: [
{ {
name: '王小明', name: '王小明',
age: 18, age: 18,
address: '北京市朝阳区芍药居' address: '北京市朝阳区芍药居',
cellClassName: {
age: 'class-cell-age',
address: 'class-cell-address'
}
}, },
{ {
name: '张小刚', name: '张小刚',
@ -57,7 +78,10 @@
{ {
name: '李小红', name: '李小红',
age: 30, age: 30,
address: '上海市浦东新区世纪大道' address: '上海市浦东新区世纪大道',
cellClassName: {
name: 'class-cell-name'
}
}, },
{ {
name: '周小伟', name: '周小伟',