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

最新推荐文章于 2024-06-26 13:38:29 发布

nice111nice

最新推荐文章于 2024-06-26 13:38:29 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/nice111nice/article/details/128455141

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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;
          }
      }