不同状态显示不同样式 cellRendererFramework
方案一 VUE文件
实现，根据值 Y或N，解析为Checkbox 选中/未选中
新建VUE文件
Markup 全选
<template>
<div style="">
<el-checkbox v-model="value" disabled true-label="Y" false-label="N"></el-checkbox>
</div>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
name: 'checkboxYNCellRenderer',
mixins: [],
data () {
return {
value:''
};
},
computed:{
},
watch:{
},
created() {
this.value = this.params.value;
},
methods: {
refresh (params) {
this.value = this.params.value;
},
},
});
</script>index.js文件负责到处index.vue组件 内容为
JavaScript 全选
import checkboxYNCellRenderer from './index.vue';
export default checkboxYNCellRenderer;使用
引入组件
JavaScript 全选
import checkBoxYNCellRenderer from "../../components/ag-grid/checkboxYNCellRenderer/index";AgGrid列中 使用组件 配置 cellRendererFramework
JavaScript 全选
{
headerName: '可用状态',
field: 'flagUse',
cellRendererFramework: checkBoxYNCellRenderer,
}
方案二 JS文件
新建 status.js
JavaScript 全选
import Vue from 'vue';
export default Vue.extend({
template: `
<div style="text-align:center;">
{{description}}
</div>
`,
data: function () {
return {
value: null,
};
},
computed: {
description () {
var str = '';
switch (this.value) {
case 0:
str = '未激活';
break;
case 1:
str = '激活';
break;
default:
str = this.value ? this.value : '';
break;
}
return str;
}
},
beforeMount () { },
mounted () {
this.value = this.params.value;
},
methods: {
},
});使用
引入组件
JavaScript 全选
import statusRenderer from './components/ag-grid-cellrender/status'agGrid 状态列设置 cellRendererFramework
JavaScript 全选
{
headerName: '状态',
field: 'isActive',
cellRendererFramework: statusRenderer
}版权声明：本文为YES开发框架网发布内容,转载请附上原文出处连接
YESWEB 张国生
