kuanghao
贫民
贫民
  • 最后登录2022-01-04
  • 发帖数3
阅读:102回复:0

[vue]关于element-ui表格单元格内容不同css样式也不同

楼主#
更多 发布于:2022-01-04 16:52
element-ui中,有时候表格中某列的字段需要用不同的颜色显示,可以使用以下方法
1.给表格使用cell-style属性并绑定一个方法来动态获取不同的值时显示的css样式不同
2.methods里写入相对应的方法
3.表格的单元格根据条件不同样式发生变化


<el-table :cell-style="cell">
</el-table>


methods:{
      // 状态颜色改变
    cell({row,column,rowIndex,columnIndex}){
      if(row.taskstatus=='已分配' && columnIndex==4){
        return 'color:#375fff'
      }else if(row.taskstatus=='执行中' && columnIndex==4){
        return 'color:#ff33cc'
      }else if(row.taskstatus=='驳回' && columnIndex==4){
        return 'color:red '
      }
    }
}


注意:cell方法传入了一个对象作为形参,在我们调用的该方法的时候(在cell-style调用时)却没有传入实参,跟上一篇val传参一样,猜测也是内置的,调用该方法即默认传入。
注意:形参row代表每一行,columb代表表格的每一列,rowIndex代表行下标,columnIndex代表列下标,两者都是从0开始算的。合理使用这两个参数可以让表格对应行列的单元格根据要求进行显示
注意:该方法必须返回字符串,格式参考css样式,列如,'color:red',类似于动态给表格的单元格添加属性
游客


返回顶部

公众号

公众号