AgGrid Options列宽度计算


介绍

右边框Padding-Right:8px

 

item的左边距:8px

两个字宽度:47px

 

(47+8)*n+8

应用示例

ag-grid 操作列设置

{
  colId: 'options',
  headerName: "操作",
  cellClass: "gz-ag-col-options",
  width: this.optionWidth(),
  cellRendererFramework: agOptions,
  resizable: false,
  suppressSizeToFit: true,
  pinned: 'right'
}

操作组件,agOptions

<template>
  <div>
    <gz-link class="gz-ml-2" type="success" icon="el-icon-edit" @click="onClickEdit">编辑</gz-link>
    <gz-link class="gz-ml-2" type="danger" icon="el-icon-delete" :usePopConfirm="true" @data-handle="(obj,calback)=>{obj.title='确定要删除吗';calback()}" @click="onClickDelete">删除</gz-link>
  </div>
</template>
<style lang="less" scoped>
</style>
<script>
import Vue from 'vue';
import request from '../request'
const prefixCls = 'ag-options';
export default Vue.extend({
  data () {
    return {
    };
  },
  computed: {
  },
  created () {
    this.refresh(this.params);
  },
  methods: {
    refresh (params) {
      this.params = params;
    },
    // 编辑
    onClickEdit (btn) {
      // this.params.context.onConfigTimeRule(this.params);
      this.params.context.showEdit(this.params, () => {
        btn.loading = false;
      });

    },
    // 删除
    onClickDelete (btn) {
      request.delete(this, this.params.data.rowID).then(res => {
        this.params.api.applyTransaction({ remove: [this.params.data] })
        this.$message({
          message: '数据删除成功',
          type: 'success'
        });
      }).finally(() => {
        btn.loading = false
      })
      // this.params.context.onDoAction(this.params);
      // console.log('删除')
      // setTimeout(() => {
      //   btn.loading = false;
      // }, 300);
    }
  }
});
</script>

方法

optionWidth () {
  var width = 0
  // 编辑权限
  if (this.VerifyPermissions(2)) width += (47 + 8)
  // 删除权限
  if (this.VerifyPermissions(4)) width += (47 + 8)
  return width + 8
}
版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
YES开发框架
下一篇:权限配置
评论列表

发表评论

评论内容
昵称:
关联文章

AgGrid Options宽度计算
AgGrid 刷新表格数据后自动填充宽度
dotnet C# 根据椭圆长度和宽度和旋转角计算出椭圆中心点的方法
agGrid自定义显示格式cellRenderer
AgGrid 行Row添加操作(操作按钮)
AgGrid显示垂直竖向线条
Devexpress RibbonControl获得内容宽度
SqlServer PIVOT函数快速实现行转,UNPIVOT实现转行
AgGrid 选中第一行
C#计算工龄/年龄
SQL计算MD5
agGrid更新数据applyTransaction无效
AgGrid表格编辑功能
ag-grid 检索-文本框
AGGrid: cellRenderer单元格渲染
AG-Grid 显示分割线,竖线
微信支付:C#计算签名
使用.NET 6开发TodoList应用(19)——处理OPTION和HEAD请求
解决 axios 跨域时,发送 post 请求前options 404
使用.NET 6开发TodoList应用(26)——实现Configuration和Option的强类型绑定