AGGrid: cellRenderer单元格渲染

组件的方式渲染单元格：

有两个属性：参考：https://www.ag-grid.com/javascript-grid-column-properties/

查看状态单元格渲染：

编辑状态单元格渲染：

方法一  定义渲染类

定义一个cellRenderer类

然后在定义的列中设置cellRenderer

对应状态列显示的效果如下：

方法二 组件导入方式

新建一个组件 statusRenderer.vue：

截图的代码比较旧，经过测试，refresh没什么用

需要纠正一下，refresh不能省略：

https://www.ag-grid.com/javascript-grid-cell-rendering-components/

<template>
    <div style="text-align: center;" :style="c_style">{{statusName}}</div>
</template>
<script>
import Vue from "vue";
export default Vue.extend({
    name: "StatusRenderer",
    data() {
        return {
            currentValue: "",
            statusName: "",
            c_style: {}
        };
    },
    created() {
        this.setMood(this.params);
    },
    methods: {
        setMood(params) {
            this.currentValue = params.value;
            switch (params.value) {
                case 0:
                    this.statusName = "未审核";
                    break;
                case -1:
                    this.statusName = "驳回";
                    this.c_style = { "background-color": "red" };
                    break;
                case 1:
                    this.statusName = "通过";
                    this.c_style = { "background-color": "green" };
                    break;
                default:
                    this.statusName = params.value;
                    this.c_style = { "background-color": "#607d8b" };
                    break;
            }
        }
    }
});
</script>

在功能组件中导入这个渲染组件：

设置column的cellRendererFramework

效果如下：