项目场景:

相关背景:

vue 项目中 使用vxe-grid 表格中给表格的表头设置特殊的格式,并为指定的列文字设置颜色


实现方案:

具体实现方法及步骤:

一、给表格的表头设置特殊的格式

在这里插入图片描述
实现方式一:

   :header-row-style="{'background-color': '#ffffff','color':'#7a8794'}"

实现方式二:

   :header-row-style="tableHeaderColor"


// 调用方法
tableHeaderColor({row , column , rowIndex , columnIndex}){
      if(columnIndex === 1) {
        return 'color: #0a8cea'; //  给该表头设置为蓝色
      }
      return 'color: #000'; // 默认颜色
    },

二、给表格的表头设置特殊的格式

在这里插入图片描述

步骤一:
添加属性::cell-style=“cell” ,调用 cell 方法

步骤二:
method里声明 cell 方法

cell({row , column , rowIndex , columnIndex}){
if(columnIndex === 1) {
return ‘color: #0a8cea’; // 给指定列设置蓝色
}
return ‘color: #000’; // 默认颜色
},

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐