naive-ui/demo/documentation/components/dataTable/enUS/customStyle.md

80 lines
1.2 KiB
Markdown
Raw Normal View History

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