欢迎光临
我们一直在努力

vue集成ag-grid之多表单显示

在同一个export default data里面的参数可以定义多个,return 里面的参数也可以定义多个,也就是说,return里面可以定义多个表单所需的参数,如下面:

gridOptions: {},

          columnDefs: null,

                rowData: null,

gridOptions2: {},

                columnDefs2: null,

                rowData2: null,

上面只需将参数的名称改变以下即可

案例:

<template>

<div id=“aggrid_Div”>

    <button @click=”getSelectedRows()”>Get Selected Rows</button>

    <button @click=”onGetData()”>获取数据</button>

    <!– <input type=”checkbox” @click=”columnModel(‘make’)” id=”uu” />uu –>

    <button @click=”columnModel(‘model’,true)” >ShowModel</button>

    <button @click=”columnModel(‘model’,false)” >HiddenModel</button>

    <ag-gridvue style=“width: 100%; height: 200px;”

                 class=“ag-theme-blue”

                 :gridOptions=”gridOptions”

                 :columnDefs=”columnDefs”

                 :rowData=”rowData”

                 :enableSorting=”true

                 :enableFilter=”true

                 rowSelection=“multiple”

                 :gridReady=”onGridReady”>

    </ag-grid-vue>

    <ag-grid-vue style=“width: 100%; height:200px;”

                 class=“ag-theme-blue”

                 :gridOptions=”gridOptions2″

                 :columnDefs=”columnDefs2″

                 :rowData=”rowData2″

                 :enableSorting=”true

                 :enableFilter=”true

                 rowSelection=“multiple”

                 :gridReady=”onGridReady”>

    </ag-grid-vue>

  </div>

</template>

<script>

import {AgGridVue} from “ag-grid-vue”;

import axios from ‘axios’

    export default   {

        data() {

        

            return {

                gridOptions: {},

                columnDefs: null,

                rowData: null,

                gridOptions2: {},

                columnDefs2: null,

                rowData2: null

            }

        },

         components: {

            ‘ag-grid-vue’: AgGridVue    

        },

        methods: {

            onGridReady(params) {

//params是该行的数据对象,将该对象的apicolumnApi赋给当前的gridApicolumnApi,

//这样this.gridApi就有了该对象对应的数据

                this.gridApi = params.api;   

                this.columnApi = params.columnApi;

            },

            getSelectedRows() {

                const selectedNodes = this.gridApi.getSelectedNodes();

               //获取选中行的所有节点

                const selectedData = selectedNodes.map( node => node.data );

                //根据selectedNodes.map,取出所有节点的数据

                //获取selectedData.map,拿出所有节点node的数据,并获取需要的数据叠加上去

                const selectedDataStringPresentation = selectedData.map( node => node.make + ‘ ‘ + node.model).join(‘, ‘);

                alert(`Selected nodes: ${selectedDataStringPresentation}`);

            },

            onGetData(){

                let _this=this;

               //this声明为其他变量,因为下面在异步查询需要用到this.rowData,在异步里面用this的话,

               //该this是异步里面的this而不是原先外面这个this,因为进入异步方法this代表当前的这个异步的this

                axios.get(‘https://api.myjson.com/bins/15psn9’) //进行异步获取

                .then(function (response) {    //response获取响应数据

                    _this.rowData=response.data; 

                   //将获取到的数据放入到指定的vm.rowData(其实就是外面的this.Data

                })

                .catch(function (error) { //异步加载失败,抛异常

                    console.log(error);

                })

            },

            columnModel(colId,YoN){

               let _this=this

               _this.columnApi.setColumnVisible(colId,YoN);

              // _this.columnApi.columnController.columnApi.setColumnVisible(_this.columnDefs[columnTit], true)

              

            }           

        },

        beforeMount() {//一开始加载

            this.columnDefs = [

                {headerName: ‘Make’, field: ‘make’},

                {headerName: ‘Model’, field: ‘model’},

                {headerName: ‘Price’, field: ‘price’}

            ];

            this.rowData=[];

            this.columnDefs2 = [

                {headerName: ‘Make’, field: ‘make’},

                {headerName: ‘Model’, field: ‘model’},

                {headerName: ‘Price’, field: ‘price’}

            ];

ag-grid

https://blog.fundodoo.com/source/ag-grid

×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

赞(2) 打赏
未经允许不得转载:醉探索戈壁 » vue集成ag-grid之多表单显示
分享到: 更多 (0)
标签:
如果觉得我的文章对您有用,您可以打赏博主或点赞文章,请随意打赏或点赞哟!
 打  赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏