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

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>