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
}