Ant Design Vue使用customCell实现单元格样式根据变量变化而变化

最新推荐文章于 2025-07-30 13:03:53 发布

原创最新推荐文章于 2025-07-30 13:03:53 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用AntDesign Vue的`customCell`特性来根据数据动态更改表格单元格的文字颜色。通过一个具体示例展示了根据不同评估级别调整文字颜色的方法。

Ant Design Vue使用customCell实现单元格样式根据变量变化而变化

需求
根据行数据的级别字段改变指定单元格文字颜色
代码
在表格列属性中增加 customCell

 columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'评估级别',
            align:"center",
            dataIndex: 'assessLevel_dictText',
            customCell: this.getCustomCellColour//添加此方法
          },
          {
            title:'疾病类型',
            align:"center",
            dataIndex: 'diseaseType_dictText'
          },
          {
            title:'标准描述',
            align:"center",
            dataIndex: 'standardDescription',
            customCell: this.getCustomCellColour//添加此方法
          },
         ]

在method中添加方法

		getCustomCellColour(record){
          switch (record.assessLevel){
            case '1':
              return {style: {'color': '#9e0418'}};
              break;
            case '2':
              return {style: {'color': '#ec0227'}};
              break;
            case '3':
              return {style: {'color': '#f6ad46'}};
              break;
            case '4':
              return {style: {'color': '#f1cc9c'}};
              break;
          }
      }