ant-design-vue table中columns根据某一元素设置颜色属性

偏执的太偏执、 2023-09-26 19:17 8阅读 0赞

## 系列文章目录 ##

需求：

ant-design-vue table中columns根据某一元素设置颜色属性  
![在这里插入图片描述][9780a5f5298f4240b46c63c36a6c40f8.png]  
如图所示的效果

#### 文章目录 ####

*  系列文章目录
 *  前言
 *  一、怎么实现？
 *  二、使用步骤

--------------------

## 前言 ##

Ant Design Vue 是遵循 Ant Design 的 Vue 组件库。是蚂蚁金服 Ant Design 官方唯一推荐的 Vue 版 UI 组件库，它其实是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步，组件的 html 结构和 css 样式也保持一致。 用下来发现它的确称得上为数不多的完整的 VUE 组件库与开发方案集成项目。

## 一、怎么实现？ ##

To set the color of a column in an ant-design-vue table based on a certain element, you can use the customRender property of the column definition.

First, add a customRender property to the column definition and set it to a function that takes in the record and returns the desired HTML string. Within this function, you can check the value of the desired element and conditionally set the color of the HTML string using inline styles.

Here’s an example of how you can set the background color of a column based on the value of a status field:

## 二、使用步骤 ##

要基于某个元素设置ant设计vue表中列的颜色属性，可以使用该列的customRender属性。此属性允许您为列定义自定义呈现函数，该函数可用于根据元素的值设置单元格的样式。

以下是如何使用customRender根据某个元素的值设置列的颜色的示例：

<template>
      <a-table :columns="columns" :data-source="data">
        
      </a-table>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          columns: [
            {
        
              title: 'Name',
              dataIndex: 'name',
              customRender: (text, record) => {
        
                const color = record.status === 'active' ? 'green' : 'red';
                return {
        
                  children: text,
                  attrs: {
        
                    style: `color: ${
          color}`,
                  },
                };
              },
            },
            // other columns
          ],
          data: [
            {
        
              name: 'John',
              status: 'active',
            },
            {
        
              name: 'Jane',
              status: 'inactive',
            },
            // other data
          ],
        };
      },
    };
    </script>

在本例中，customRender函数检查正在渲染的记录的状态属性的值，如果状态为“活动”，则将单元格的颜色设置为绿色，否则设置为红色。返回对象的children属性是要在单元格中显示的文本，attrs属性是包含要应用于单元格的任何附加属性的对象，在本例中是具有适当颜色值的style属性。

您可以修改此示例以满足您的特定需要，但基本思想是使用customRender属性来定义一个函数，该函数根据某个元素的值设置单元的样式

> （示例2）：

{
        
              title: '温度',
              dataIndex: 'temperature',
              key: 'temperature',
              width: 120,
              align: 'center',
              customRender: function(text, record) {
        
                if (text == -99) {
        
                  return '无'
                } else if (record.flag == 'N') {
        
                  return {
        
                    attrs: {
        
                      style: 'color: red',
                    },
                    children: text,
                  }
                } else return text
              },
            },

> （示例3）：  
> 通过SPAN输出字体

{
        
              title: '温度',
              dataIndex: 'temperature',
              key: 'temperature',
              width: 120,
              align: 'center',
              customRender: function(text, record) {
        
                if (text == -99) {
        
                  return <span>无</span>
                } else if (record.roomTempNormalFlag == 'N') {
        
                  return {
        
                    children: <span style="color: red">{
        text}</span>,
                  }
                } else return <span>{
        text}</span>
              },
            },

[9780a5f5298f4240b46c63c36a6c40f8.png]: https://img-blog.csdnimg.cn/9780a5f5298f4240b46c63c36a6c40f8.png