element-ui的el-table改变单个单元格的背景颜色

效果图如下:

  • 需要在el-table 标签中添加 :cell-style=" " 方法

  • 代码如下(页面结构)

  • 代码如下(方法处理)

    methods: {
      // 背景颜色处理
      tableCellStyle ({row, column, rowIndex, columnIndex}) {
        if(columnIndex === 11) {      // 表格的第11行做处理
          if(fxdj == 4) {             // 如果是低风险背景色蓝色,字体色白色
          return 'background:blue; color:white' 
          }else if(fxdj == 2) {       // 较大风险
            return 'background:orange' 
          }else if(fxdj == 1) {       // 重大风险
            return 'background:red'
          } else {                    // 一般风险
            return 'background:yellow'
          }
        }else {
          return ''
        }
      },
    }

 

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐