不同状态显示不同样式 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开发框架网发布内容,转载请附上原文出处连接
张国生
评论列表

发表评论

评论内容
昵称:
关联文章

不同状态显示样式 cellRendererFramework
YESWinform开发框架关于模块功能权限下的布局介绍
win10开始菜单图标显示正常,解决方案
窗体状态
CSS样式:div文本超出用...表示 div换行
css样式排除某个属性,或者类样式名称
CSS设置奇偶行(交替行)颜色样式
[WPF] 实现一个很久以前流行的按钮样式
Windows下Git多账号配置,一电脑多个ssh-key的管理
AgGrid使用CellRendererFramework后,修改数据调用applyTransaction数据没刷新
Winform窗体设置组件可用状态
样式参考
AgGrid 隐藏loading状态
C# 在PDF文档中应用多种不同字体
.NET Core 项目调试的时候能修改代码
C# Wifnorm开发 statusStrip 状态条 toolStripStatusLabel 居右显示
支付系统中要避免支付状态并发BUG
DevExpress 设置DateEdit显示年月
兼容不同时区时间戳方案
Devexpress gridControl SummaryItem显示格式化设置DisplayFormat