如何在Kendo Vue中为特定列的指定单元格条件设置背景色？

实现思路 #

借助Excel导出的cellOptions配置，针对目标列单独判断单元格值，返回对应样式配置即可实现需求。

具体代码示例 #

假设要给status列中值为"异常"的单元格设置浅红色背景：

<template>
  <div>
    <button @click="exportExcel">导出Excel</button>
    <kendo-grid :data-items="gridData">
      <kendo-grid-column field="name" title="名称"></kendo-grid-column>
      <kendo-grid-column field="status" title="状态"></kendo-grid-column>
      <kendo-grid-column field="value" title="数值"></kendo-grid-column>
    </kendo-grid>
  </div>
</template>

<script>
import { Grid, GridColumn } from '@progress/kendo-vue-grid';
import { excelExport } from '@progress/kendo-vue-excel-export';
import { saveAs } from '@progress/kendo-file-saver';

export default {
  components: {
    'kendo-grid': Grid,
    'kendo-grid-column': GridColumn
  },
  data() {
    return {
      gridData: [
        { name: '项目A', status: '正常', value: 100 },
        { name: '项目B', status: '异常', value: 50 },
        { name: '项目C', status: '异常', value: 30 }
      ]
    };
  },
  methods: {
    exportExcel() {
      excelExport({
        data: this.gridData,
        columns: [
          { field: 'name', title: '名称' },
          { 
            field: 'status', 
            title: '状态',
            // 针对当前列配置cellOptions
            cellOptions: (dataItem) => {
              return dataItem.status === '异常' 
                ? { background: '#ffcccc' } 
                : {};
            }
          },
          { field: 'value', title: '数值' }
        ]
      }).then((data) => {
        saveAs(data, '导出数据.xlsx');
      });
    }
  }
};
</script>

关键说明 #

• 在columns配置里，给目标列单独定义cellOptions函数，函数接收当前行的dataItem作为参数。
• 根据dataItem中当前列的字段值做判断，满足条件时返回包含background属性的配置对象，否则返回空对象。
• 该方案完全适配Vue，仅针对目标列生效，不会影响其他列或整行样式。

内容的提问来源于stack exchange，提问作者dtthom09