【avue-curd表格常用属性和用法】_avue :cell-class-name-优快云博客

本文链接：https://blog.youkuaiyun.com/lemon94924/article/details/124970806

本文介绍如何使用Avue-Crud组件库自定义表格单元格的样式，通过添加特定的class来改变不同条件下的单元格背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

avue-curd表格修改一列样式

绑定class页面

<avue-crud ref="fdcPersonTable" :data="listData" @selection-change="selectionChange" id="printTable"
:option="option" stripe :page.sync="page"
@on-load="onPageLoad"
@row-dblclick="handleRowDBLClick"
@sort-change="sortChange"
 @cell-click="cellClick" 
@current-row-change="handleCurrentRowChange" 
 :cell-class-name="addCellClass">

在avue-crud加上：cell-class-name=“addCellClass”

JS里面（判断列的属性值及行该属性值的值）

addCellClass({row,column}){
        if(column.property === '' && row.hsbdjg==''){
          return 'cell-red'
        }else if(column.property === '' && row.hsbdjg==''){
          return 'cell-green'
        }else if(column.property === '' && row.hsbdjg==''){
          return 'cell-yellow'
        }
	  }

判断style
不明白为什么加 /deep/

div /deep/ .cell-green span{
  background: green!important;
  color:#fff;
  padding:1px;
}
div /deep/ .cell-red span{
  background: red!important;
  color:#fff;
  padding:2px;
}
div /deep/ .cell-yellow span{
  background: #b4bb21!important;
  color:#fff;
  padding:1px;
}