利用cellRendererFramework将Vue组件渲染为ag-grid表格单元的内容

最新推荐文章于 2024-08-16 23:30:51 发布

sleepwalker_1992

最新推荐文章于 2024-08-16 23:30:51 发布

阅读量7.2k

点赞数

分类专栏： Vue 文章标签： ag-grid Vue

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/83650396

版权

Vue 专栏收录该内容

37 篇文章 8 订阅

订阅专栏

1、Vue组件内定义私有组件，用cellRendererFramework来渲染ag-grid表格单元的内容

<template>
  <div>
    <!-- gridReady 绑定一个事件，在表格创建完成后执行 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" rowSelection="multiple" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

export default {
  components: {
    AgGridVue,
    // 定义要用来渲染表格内容的组件
    'incomeComponent': {
      template: '<span>月收入：{{params.value}}，年收入：{{ valueCubed() }}</span>',
      methods: {
        valueCubed () {
          return this.params.value * 12;
        }
      }
    },
    ParamsComponent: {
      template: '<span>headerName: {{params.colDef.headerName}}, Field: {{params.colDef.field}}, Value: {{params.value}}</span>'
    }
  },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        {headerName: '', field: '', maxWidth: 44, checkboxSelection: true},
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'},
        {headerName: '收入', field: 'income', minWidth: 200, cellRendererFramework: 'incomeComponent'},
        {headerName: 'ID', field: 'id', minWidth: 260, cellRendererFramework: 'ParamsComponent'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, income: 2000, id: 1},
        {name: '柳叶', gender: '女', age: 25, income: 2500, id: 2},
        {name: '姜宇', gender: '男', age: 18, income: 1800, id: 3}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    }
  }
};
</script>

<style scoped>
.table{
  width: 60%;
  height: 200px;
}
</style>

2、在该Vue组件外部定义组件，再引入到该组件中，注册为该组件的私有组件，用cellRendererFramework来渲染ag-grid表格单元的内容

<template>
  <div>
    <!-- gridReady 绑定一个事件，在表格创建完成后执行 -->
    <ag-grid-vue class="table ag-theme-balham" :columnDefs="columnDefs" :rowData="rowData" rowSelection="multiple" :gridReady="onGridReady"></ag-grid-vue>
  </div>
</template>

<script>
// 引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';

import incomeComponent from './incomeComponent.vue';
import ParamsComponent from './ParamsComponent.vue';

export default {
  components: {
    AgGridVue,
    // 将外部引入的组件，注册为该组件的私有组件，用来渲染表格内容
    'incomeComponent': incomeComponent,
    ParamsComponent
  },
  data () {
    return {
      gridApi: null,
      columnApi: null,
      columnDefs: [
        {headerName: '', field: '', maxWidth: 44, checkboxSelection: true},
        {headerName: '姓名', field: 'name'},
        {headerName: '性别', field: 'gender'},
        {headerName: '年龄', field: 'age'},
        {headerName: '收入', field: 'income', minWidth: 200, cellRendererFramework: 'incomeComponent'},
        {headerName: 'ID', field: 'id', minWidth: 260, cellRendererFramework: 'ParamsComponent'}
      ],
      rowData: [
        {name: '李煜', gender: '男', age: 20, income: 2000, id: 1},
        {name: '柳叶', gender: '女', age: 25, income: 2500, id: 2},
        {name: '姜宇', gender: '男', age: 18, income: 1800, id: 3}
      ]
    };
  },
  methods: {
    // 表格创建完成后执行
    onGridReady (params) {
      console.log(params);
      // 获取gridApi
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      // 调整表格列宽大小自适应
      this.gridApi.sizeColumnsToFit();
    }
  }
};
</script>

<style scoped>
.table{
  width: 60%;
  height: 200px;
}
</style>

ParamsComponent.vue

<template>
  <span>headerName: {{params.colDef.headerName}}, Field: {{params.colDef.field}}, Value: {{params.value}}</span>
</template>

incomeComponent.vue

<template>
  <span>月收入：{{params.value}}，年收入：{{ valueCubed() }}</span>
</template>

<script>
export default {
  data () {
    return {};
  },
  methods: {
    valueCubed () {
      return this.params.value * 12;
    }
  }
};
</script>