2019-12-16 17:43:56 +08:00
|
|
|
# Custom Style
|
2020-01-31 17:02:33 +08:00
|
|
|
Row: Set `row-class-name` prop to assign a class name to certain rows.
|
2019-12-16 17:43:56 +08:00
|
|
|
|
2020-01-31 17:02:33 +08:00
|
|
|
Column: Set `className` property on column object to assign a class name to a certain column.
|
2019-12-16 17:43:56 +08:00
|
|
|
|
|
|
|
```html
|
2019-12-31 21:01:24 +08:00
|
|
|
<n-data-table
|
2019-12-16 17:43:56 +08:00
|
|
|
ref="table"
|
|
|
|
:columns="columns"
|
|
|
|
:data="data"
|
|
|
|
:row-class-name="rowClassName"
|
2020-01-05 22:46:13 +08:00
|
|
|
/>
|
2019-12-16 17:43:56 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
```js
|
|
|
|
const data = [
|
|
|
|
{
|
2020-01-31 17:02:33 +08:00
|
|
|
key: 0,
|
|
|
|
name: 'John Brown',
|
2019-12-16 17:43:56 +08:00
|
|
|
age: 32,
|
2020-01-31 17:02:33 +08:00
|
|
|
address: 'New York No. 1 Lake Park'
|
2019-12-16 17:43:56 +08:00
|
|
|
},
|
|
|
|
{
|
2020-01-31 17:02:33 +08:00
|
|
|
key: 1,
|
|
|
|
name: 'Jim Green',
|
2019-12-16 17:43:56 +08:00
|
|
|
age: 42,
|
2020-01-31 17:02:33 +08:00
|
|
|
address: 'London No. 1 Lake Park'
|
2019-12-16 17:43:56 +08:00
|
|
|
},
|
|
|
|
{
|
2020-01-31 17:02:33 +08:00
|
|
|
key: 2,
|
|
|
|
name: 'Joe Black',
|
2019-12-16 17:43:56 +08:00
|
|
|
age: 32,
|
2020-01-31 17:02:33 +08:00
|
|
|
address: 'Sidney No. 1 Lake Park'
|
2019-12-16 17:43:56 +08:00
|
|
|
}
|
2020-01-05 22:46:13 +08:00
|
|
|
]
|
2020-01-05 15:20:35 +08:00
|
|
|
|
2019-12-16 17:43:56 +08:00
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
data: data,
|
2020-01-05 15:20:35 +08:00
|
|
|
columns: [
|
2019-12-16 17:43:56 +08:00
|
|
|
{
|
2020-01-31 17:02:33 +08:00
|
|
|
title: 'Name',
|
|
|
|
key: 'name'
|
2019-12-16 17:43:56 +08:00
|
|
|
},
|
|
|
|
{
|
2020-01-31 17:02:33 +08:00
|
|
|
title: 'Age',
|
|
|
|
key: 'age',
|
|
|
|
className: 'age'
|
2019-12-16 17:43:56 +08:00
|
|
|
},
|
|
|
|
{
|
2020-01-31 17:02:33 +08:00
|
|
|
title: 'Address',
|
|
|
|
key: 'address'
|
2019-12-16 17:43:56 +08:00
|
|
|
}
|
|
|
|
]
|
2020-01-05 22:46:13 +08:00
|
|
|
}
|
2019-12-16 17:43:56 +08:00
|
|
|
},
|
|
|
|
methods: {
|
2020-01-05 15:20:35 +08:00
|
|
|
rowClassName(row, index) {
|
|
|
|
if (row.age > 32) {
|
2020-01-31 17:02:33 +08:00
|
|
|
return 'too-old'
|
2019-12-16 17:43:56 +08:00
|
|
|
}
|
2020-01-05 15:20:35 +08:00
|
|
|
return null
|
2019-12-16 17:43:56 +08:00
|
|
|
}
|
|
|
|
}
|
2020-01-05 22:46:13 +08:00
|
|
|
}
|
2019-12-16 17:43:56 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
```css
|
2020-01-31 17:02:33 +08:00
|
|
|
/deep/ .too-old td {
|
|
|
|
color: rgba(255, 0, 0, .75) !important;
|
2019-12-16 17:43:56 +08:00
|
|
|
}
|
|
|
|
/deep/ .age {
|
2020-01-31 17:02:33 +08:00
|
|
|
color: rgba(0, 128, 0, .75) !important;
|
|
|
|
}
|
|
|
|
/deep/ .too-old .age {
|
|
|
|
color: rgba(0, 0, 128, .75) !important;
|
2019-12-16 17:43:56 +08:00
|
|
|
}
|
|
|
|
```
|