ant design vue colomn加了customRender会错位问题

缺乏、安全感 2023-09-26 19:50 10阅读 0赞

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

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

*  Ant Design Vue介绍
 *  前言
 *  一、修改前
 *  二、修改后
 *  总结

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

## Ant Design Vue介绍 ##

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

Ant Design Vue is a Vue component library that follows Ant Design. It is the only Vue version UI component library officially recommended by Ant Design on Ant Financial. It is actually a Vue implementation of Ant Design, and the style of the components is synchronized with Ant Design. The HTML structure and CSS style of the components are also consistent. It can indeed be considered one of the few complete VUE component libraries and development solution integration projects.

## 前言 ##

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

CustomRender是一些编程语言中的一个功能，允许开发人员自定义某些元素的渲染。这对于创建更动态和交互式的用户界面非常有用。通常情况下，CustomRender可用于修改按钮、窗体或表等元素的外观或行为。CustomRender示例如下所示：

columns: [
       {
        
          title: '类型',
          dataIndex: 'type',
          customRender: (text, record) => {
        
            console.log(record)
            if (text === 0) {
        
              return '客户1'
            } else if (text === 1) {
        
              return '客户2'
            } else if (text === 2) {
        
              return '客户3'
            }
          }
        }
     ]

ant design vue colomn加了customRender会错位问题，可能的情况有很多种，以下是我遇到的一种情况，并且给出了解决方案（答案不唯一）。

## 一、修改前 ##

这是一个colomn例子，我是直接将元素return，没有设置元素的格式，导致其错位，table表格中有些数据不对称，后续有解决方法

{
        
              title: '机房环境温度',
              dataIndex: 'roomAmbientTemperature',
              key: 'roomAmbientTemperature',
              width: 120,
              align: 'center',
              customRender: function(text, record) {
        
                if (text == -99) {
        
                  return '无'
                } else if (record.roomTempNormalFlag == 'N') {
        
                  return {
        
                    attrs: {
        
                      style: 'color: red',
                    },
                    children: text,
                  }
                } else return text
              },
            },
            {
        
              title: '回风温度',
              dataIndex: 'returnTemp',
              key: 'returnTemp',
              width: 120,
              align: 'center',
              customRender: function(text, record) {
        
                if (record.returnTempValueFlag == 'N') {
        
                  return '无'
                } else if (record.returnTempNormalFlag == 'N') {
        
                  return {
        
                    attrs: {
        
                      style: 'color: red',
                    },
                    children: text,
                  }
                } else return text
              },
            },

## 二、修改后 ##

加入span元素包裹，其中可以设置字体颜色，让其格式统一，错位问题解决，亲测有效

> 代码如下（示例）：

{
 
 title: '机房环境温度',
 dataIndex: 'roomAmbientTemperature',
 key: 'roomAmbientTemperature',
 width: 120,
 align: 'center',
 customRender: function(text, record) {
 
 if (text == -99) {
 
 return 无
 } else if (record.roomTempNormalFlag == 'N') {
 
 return {
 
 children: {
 text},
 }
 } else return {
 text}
 },
 },
 {
 
 title: '回风温度',
 dataIndex: 'returnTemp',
 key: 'returnTemp',
 width: 120,
 align: 'center',
 customRender: function(text, record) {
 
 if (record.returnTempValueFlag == 'N') {
 
 return 无
 } else if (record.returnTempNormalFlag == 'N') {
 
 return {
 
 children: {
 text},
 }
 } else return {
 text}
 },
 },

## 总结 ##

`提示：这里对文章进行总结：`

将具有样式属性的span元素添加到customRender函数中进行返回处理，以设置文本的颜色和格式，保证table中不错位。

span标签的作用：组合文档中的行内元素。  
标签在行内定义一个区域，也就是一行内可以被划分成好几个区域，从而实现某种特定效果。其实本身没有任何属性，只有当对它应用样式时，它才会产生视觉上的变化。Span标签最常见的用途是在文本中标记一个特定的部分，例如一个单词或一个短语。它可以用于给这个部分添加样式，比如修改它的颜色、字体大小或者字体样式。这样，我们就可以在文本中突出显示这个部分，使其更加醒目。  
除了在文本中标记特定的部分之外，Span标签还可以用于很多其他的用途。例如，它可以用于在网页中定义一个独立的区域，或者用于添加其他的HTML元素。