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>