# Avue实现表格指定行样式

本文作者：程序员飞云

本站地址：https://www.flycode.icu (opens new window)

# avue-curd配置option

:row-class-name="rowStyle"

<avue-crud :option="option"
:table-loading="loading"
:data="data"
:page.sync="page"
:permission="permissionList"
:before-open="beforeOpen"
:before-close="beforeClose"
:row-class-name="rowStyle"
v-model="form"
ref="crud"
@row-update="rowUpdate"
@row-save="rowSave"
@row-del="rowDel"
@search-change="searchChange"
@search-reset="searchReset"
@selection-change="selectionChange"
@current-change="currentChange"
@size-change="sizeChange"
@refresh-change="refreshChange"
@on-load="onLoad">

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 编写方法

根据自己的条件进行判断，最后返回的是对应的样式

    rowStyle({row, column}) {
      if (row.a098 === "0" || row.a098 === undefined) {
        return 'warning-row'
      }
    }

1
2
3
4
5

# 编写样式

.warning-row {
  background-color: #ff4d4f !important; /* 设置背景色为红色 */
}

1
2
3