在项目中表格中可能会有一些需要特殊处理的单元格 那么我们需要怎么实现呢 直接上代码
<template>
<Table :columns="columns1" :data="data2"></Table>
</template>
简单的定义一个 通过cellClassName 属性给某个单元格自定义别名
data () {
return {
columns1: [
{
title: 'Name',
key: 'name'
},
{
title: 'Age',
key: 'age'
},
{
title: 'Address',
key: 'address'
}
],
data2: [
{
name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park'
},
{
name: 'Jim Green',
age: 25,
address: 'London No. 1 Lake Park',
cellClassName: {
age: 'age',
address: 'address'
}
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
cellClassName:{
age:'age1',
name:'name'
}
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
cellClassName: {
name: 'demo-table-info-cell-name'
}
}
]
}
},
通过自定义的 属性名称 进行单独的设置
<style>
.ivu-table .demo-table-info-cell-name {
background-color: #2db7f5;
color: #fff;
}
.ivu-table .age {
background-color: #fff;
color: red;
}
.ivu-table .address {
background-color: #187;
color: #fff;
}
.ivu-table .name {
background-color: #555;
color: #666;
}
</style>