标签：node vue ag theme balham params grid true

ag-grid-vue表格的一些问题总结

1.表头居中和表格内容居中

找了很多资料也没有找到


在style标签中输入下面代码,就会居中。

/deep/ .ag-theme-balham [class^='ag-'],
.ag-theme-balham [class^='ag-']:focus,
.ag-theme-balham [class^='ag-']:after,
.ag-theme-balham [class^='ag-']:before {
    text-align: center;
}
/deep/ .ag-header-cell-text{
  text-align: center ;
  width: 100%;
}

2.根据条件将单元格内容加背景字体加颜色cellStyle

第一张图到第二张图只需要在对应的定义字段的位置添加下面的代码

{
          headerName: '最新文件上传人员',
          field: 'UploadPersonnel',
          tooltipField: 'UploadPersonnel',
          sortable: true,
          cellStyle: function (params) {
            return {
              color: params.value === '鲁迅' ? '#88d068' : '#ff3366',
              background: params.value === '朱自清' ? '#88d068' : '#ff3366'
            }
          }
        }

3.给表格加操作栏cellRendererFramework

加操作栏需要在字段定义的时候写如下代码：

 {
     headerName: '操作',
     cellRendererFramework: Vue.extend(ActionDown),
     sortable: true
  },

如果把操作栏固定在左侧或者右侧需要加：

{
headerName: ‘操作’,
cellRendererFramework: Vue.extend(ActionDown),
sortable: true,
pinned: ‘right’,
},

ActionDown是具体的操作需要引入ActionDown中的内容为：

<template>
  <div style="float:left;">
    <a
      style="cursor: pointer;color:#0A56C9;padding-right:10px"
      @click="downLoad()"
    >下载
    </a>

    <a
      style="cursor: pointer;color:#0A56C9"
      @click="queryHistory()"
    >查看历史版本
    </a>
  </div>
</template>

<script>
export default {
  methods: {
    downLoad () {
      this.params.context.componentParent.todownLoad(this.params.node.data, this.params.node.rowIndex)
    },
    queryHistory () {
      this.params.context.componentParent.toqueryHistory(this.params.node.data, this.params.node.rowIndex)
    }
  },
  computed: {},
  watch: {
    params: {
      handler: function (newVal, oldVal) {
        this.enable = newVal.data.enable
      },
      immediate: true
    }
  }
}

</script>

<style lang="css" scoped>

</style>

标签：node,vue,ag,theme,balham,params,grid,true
来源： https://blog.csdn.net/weixin_44548681/article/details/105653848

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。