132 lines
4.1 KiB
Vue
132 lines
4.1 KiB
Vue
<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 td.demo-table-info-column{
|
||
background-color: #2db7f5;
|
||
color: #fff;
|
||
}
|
||
.ivu-table .demo-table-info-cell-name {
|
||
background-color: #2db7f5;
|
||
color: #fff;
|
||
}
|
||
.ivu-table .demo-table-info-cell-age {
|
||
background-color: #ff6600;
|
||
color: #fff;
|
||
}
|
||
.ivu-table .demo-table-info-cell-address {
|
||
background-color: #187;
|
||
color: #fff;
|
||
}
|
||
</style>
|
||
<template>
|
||
<p>自定义行样式：</p>
|
||
<!--<i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table>-->
|
||
<p>自定义列样式：</p>
|
||
<i-table :columns="columns9" :data="data1"></i-table>
|
||
<p>自定义任意单元格样式：</p>
|
||
<!--<i-table :columns="columns1" :data="data8"></i-table>-->
|
||
</template>
|
||
<script>
|
||
export default {
|
||
data () {
|
||
return {
|
||
columns1: [
|
||
{
|
||
title: '姓名',
|
||
key: 'name'
|
||
},
|
||
{
|
||
title: '年龄',
|
||
key: 'age'
|
||
},
|
||
{
|
||
title: '地址',
|
||
key: 'address'
|
||
}
|
||
],
|
||
columns9: [
|
||
{
|
||
title: '姓名',
|
||
key: 'name'
|
||
},
|
||
{
|
||
title: '年龄',
|
||
key: 'age',
|
||
className: 'demo-table-info-column'
|
||
},
|
||
{
|
||
title: '地址',
|
||
key: 'address'
|
||
}
|
||
],
|
||
data1: [
|
||
{
|
||
name: '王小明',
|
||
age: 18,
|
||
address: '北京市朝阳区芍药居'
|
||
},
|
||
{
|
||
name: '张小刚',
|
||
age: 25,
|
||
address: '北京市海淀区西二旗'
|
||
},
|
||
{
|
||
name: '李小红',
|
||
age: 30,
|
||
address: '上海市浦东新区世纪大道'
|
||
},
|
||
{
|
||
name: '周小伟',
|
||
age: 26,
|
||
address: '深圳市南山区深南大道'
|
||
}
|
||
],
|
||
data8: [
|
||
{
|
||
name: '王小明',
|
||
age: 18,
|
||
address: '北京市朝阳区芍药居'
|
||
},
|
||
{
|
||
name: '张小刚',
|
||
age: 25,
|
||
address: '北京市海淀区西二旗',
|
||
cellClassName: {
|
||
age: 'demo-table-info-cell-age',
|
||
address: 'demo-table-info-cell-address'
|
||
}
|
||
},
|
||
{
|
||
name: '李小红',
|
||
age: 30,
|
||
address: '上海市浦东新区世纪大道'
|
||
},
|
||
{
|
||
name: '周小伟',
|
||
age: 26,
|
||
address: '深圳市南山区深南大道',
|
||
cellClassName: {
|
||
name: 'demo-table-info-cell-name'
|
||
}
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
rowClassName (row, index) {
|
||
if (index === 1) {
|
||
return 'demo-table-info-row';
|
||
} else if (index === 3) {
|
||
return 'demo-table-error-row';
|
||
}
|
||
return '';
|
||
}
|
||
}
|
||
}
|
||
</script>
|