ant design vue2表格 动态表头给字体添加颜色
时间: 2023-08-03 22:06:11 浏览: 117
vue element 中的table动态渲染实现(动态表头)
你可以通过在 `columns` 中设置 `customRender` 属性来自定义表格列的渲染,然后在自定义渲染函数中添加颜色样式。
以下是一个示例:
```html
<template>
<a-table :columns="columns" :data-source="dataSource"></a-table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '姓名',
dataIndex: 'name',
key: 'name'
},
{
title: '年龄',
dataIndex: 'age',
key: 'age'
},
{
title: '性别',
dataIndex: 'gender',
key: 'gender',
customRender: (text, record, index) => {
const color = record.gender === '男' ? 'blue' : 'pink';
return <span style={{ color }}>{text}</span>;
}
}
],
dataSource: [
{
key: '1',
name: '张三',
age: 18,
gender: '男'
},
{
key: '2',
name: '李四',
age: 20,
gender: '女'
}
]
}
}
}
</script>
```
以上示例中,我们通过在 `columns` 中为“性别”列设置了 `customRender` 属性,然后在自定义渲染函数中根据 `record` 中的数据判断性别,进而设置颜色样式。这里使用了 JSX 语法来创建 `<span>` 元素,并使用双花括号包含样式对象。你也可以使用普通的模板字符串语法来创建元素和样式。
希望这个示例能够帮到你。
阅读全文