avue给一些行设置特殊背景颜色

需求

从后端查出来的数据形成的表格，其行背景颜色要根据一些条件进行改变

设置背景颜色样式前

 

设置背景颜色后

过程 

1.给avue-crud框架绑定:row-class-name事件

2.在row-class-name绑定事件中写对哪些行进行处理，即确定处理某些行的条件（在methods中row-class-name绑定事件）

3.在style中写要特殊设置的样式（我这里只改变背景颜色），注意：背景颜色后一定要加!important，否则不生效

部分代码如下

<template>
  <basic-container>
    <avue-crud ref="crud"
               :data="data"
               :page.sync="page"
               :option="option"
               :search="query"
               :row-class-name="rowStyle"
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="onRefresh"
               @row-dblclick="handleRowClick"
               @on-load="onLoad">
      <template slot-scope="{row}"
                slot="task">
        {{ row.taskDoneNum }} / {{ row.taskTotalNum }}
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {DICT, tree_stuff} from "@/util/mixins";
import {list, update} from "@/api/report/project";

export default {
  data() {
    return {
      query: {isArchived_eq: 0},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        tip: false,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        menu: false,
        searchMenuSpan: 4,
        columnBtn: true,
        column: [
          {label: "项目状态", prop: "isArchived_eq", type: "select", dicData: DICT.archivedType, valueKey: "isArchived_eq", search: true, searchSpan: 4, searchPlaceholder: "是否归档", showColumn: false, hide: true},
          {label: "需求来源", prop: "requireBu_like", type: "select", dicData: DICT.requiredBUType, search: true, searchSpan: 4, searchPlaceholder: "需求来源", filterable: true, showColumn: false, hide: true},
          {label: "费用列支", prop: "chargeType_eq", type: "select", dicData: DICT.chargeType, cell: true, search: true, searchSpan: 4, placeholder: "费用列支", showColumn: false, hide: true},

          {label: "项目名称", prop: "projectName", minWidth: 260, search: true, searchSpan: 5, searchPlaceholder: "项目名称",fixed:true},
          {
            label: "费用列支", prop: "chargeType", type: "select", dicData: DICT.chargeType, cell: true, width: 110, placeholder: "请选择",
            change: ({row, value}) => {
              if (!value) return;
              this.rowUpdate(row);
            }
          },
          {
            label: "项目负责人", prop: "personId", type: "select", dicData: tree_stuff, filterable: true, cell: true, width: 110, placeholder: "可输入",
            change: ({row, value}) => {
              if (!value) return;
              this.rowUpdate(row);
            }
          },
          {label: "需求申请所属事业部", prop: "requireBU", width: 220, overHidden: true},
          {label: "需求总数", prop: "requireNum", width: 100, sortable: true},
          {label: "产品设计", prop: "productNum", width: 100, sortable: true},
          {label: "任务统计", prop: "task", width: 100, slot: true},
          {label: "七日新增", prop: "addNum", width: 100, sortable: true},
          {label: "七日完成", prop: "doneNum", width: 100, sortable: true},
          {label: "投入资源", prop: "resNum", width: 100, slot: true},
          {label: "项目人天", prop: "requireNums", width: 100, sortable: true},
          {label: "发生费用", prop: "usedAmount", width: 120, sortable: true},
          {label: "预估费用总计", prop: "reckonAmount", width: 120, sortable: true},
          {label: "预估费用剩余", prop: "residueDays", width: 120, slot: true, sortable: true}
        ],
      },
      data: []
    };
  },
  methods: {
    rowUpdate(row) {
      update(row);
      row.$cellEdit = false;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.currentPage = 1;
      this.page.pageSize = pageSize;
    },
    searchReset() {
      this.query = {isArchived_eq: 0};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    onRefresh() {
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      list(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data;
        this.page.total = data.total;
        this.data = data.records;
        this.data.forEach(item => {
          item.residueAmount = item.reckonAmount - item.usedAmount;
          item.residueDays = item.residueAmount / item.daysAmount;
          if (item.chargeType === -1) item.chargeType = null;
        });
      });
    },
    handleRowClick(row, column) {
      if (["chargeType", "personId"].includes(column.property)) {
        this.$refs.crud.rowCell(row, row.$index);
      }
    },
    rowStyle({ row }) {
      if (row.addNum == 0 && row.doneNum == 0) {
        return "row-color";
      }
    }
  }
};
</script>

<style>
.row-color {
  background-color: #e5e5ff !important;
  cursor: pointer;
}

</style>

 推荐博客：

avue-crud 给table的row设置样式_若青儿2020的博客-CSDN博客_avue crud 行高

Avue给table的某一列设置样式，点击实现页面跳转或是其他操作_Q❀的博客-CSDN博客