ag-grid vue 插入数据新增行

vue的ag-grid插入数据新增行比传统版简单得多,只需要往数组里插入一行即可实现。

插入数据

<template> 
   <div class="itxst"> 
     <div @click="add"  class="btn">插入数据</div> 
    <!-- 使用ag-grid-vue组件 其中columnDefs为列,rowData为表格数据 -->
    <ag-grid-vue 
     style="width: 100%; height: 300px;" 
     class="table ag-theme-balham"
     :columnDefs="columnDefs" 
     :rowData="rowData" 
     :enableColResize="true"
     @gridReady="onGridReady" 
      rowSelection="multiple"
     ></ag-grid-vue>
  </div>
</template>
<script>
//引入样式文件
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-balham.css';
//引入ag-grid-vue
import { AgGridVue } from 'ag-grid-vue';
export default {
  //注册draggable组件
  components: {
    AgGridVue
  },
  data() {
    return {  
      //定义ag-grid列 checkboxSelection 对名称列显示单选框
      columnDefs: [
        {headerName: '名称', field: 'title', checkboxSelection: true},
        {headerName: '网址', field: 'url', width: 100},
        {headerName: '分类', field: 'catalog'},
        {headerName: 'PR', field: 'pr'}
      ],
      //需要显示的数据
      rowData: [
        {title: '谷歌', url: 'www.google', catalog: '搜索引擎',pr:10},
        {title: '微软', url: 'www.microsoft.com', catalog: '操作系',pr:10},
        {title: 'ITXST', url: 'www.itxst.com', catalog: '小站',pr:1},
        {title: '淘宝', url: 'www.taobao.com', catalog: '电商',pr:8}
      ]
    };
  },
  methods: {  
    //ag-grid创建完成后执行的事件很重要
    onGridReady (params) {
        console.log(params);
        // 获取gridApi
        this.gridApi = params.api;
        this.columnApi = params.columnApi;
        // 这时就可以通过gridApi调用ag-grid的传统方法了
        this.gridApi.sizeColumnsToFit();
    },
    //插入数据
    add(){
     this.rowData.push({title: '亚马逊', url: 'www.amazon.com', catalog: '电商',pr:8});
    }
  }
};
</script>
<style scoped>
.itxst {
  margin: 10px;
  text-align: left;
} 
.btn{
   width: 150px;
    margin-bottom: 10px;
    border: solid 1px #ddd;
    padding: 6px;
    text-align: center;
    border-radius: 6px;
    background-color: #eee;
    display: inline-block;
    cursor: pointer;
}
</style>

在线试一试

umd网页版代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ag-grid-vue插入数据例子</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="http://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="http://www.itxst.com/package/ag-grid/ag-grid-community.js"></script>
    <script src="http://www.itxst.com/package/ag-grid-vue/ag-grid-vue.umd.js"></script>
    <link href="http://www.itxst.com/package/ag-grid/styles/ag-grid.css" rel="stylesheet" />
    <style>
        .btn {
            width: 150px;
            margin-bottom: 10px;
            border: solid 1px #ddd;
            padding: 6px;
            text-align: center;
            border-radius: 6px;
            background-color: #eee;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body style="padding:10px;">
    <div id="app">
        <div @click="add" class="btn">插入数据</div>
        <!-- 使用ag-grid-vue组件 其中columnDefs为列,rowData为表格数据 -->
        <ag-grid-vue style="width: 100%; height: 200px;"
                     class="table ag-theme-balham"
                     :column-defs="columnDefs"
                     :row-data="rowData"
                     @grid-ready="onGridReady"></ag-grid-vue>
    </div>
    <script>
        //注册ag-grid-vue组件
        Vue.component('ag-grid-vue', window["ag-grid-vue"].AgGridVue);


        var app = new Vue({
            el: '#app',
            data() {
                return {
                    //定义ag-grid列
                    columnDefs: [
                        { headerName: '名称', field: 'title', checkboxSelection: true },
                        { headerName: '网址', field: 'url', width: 200 },
                        { headerName: '分类', field: 'catalog' },
                        { headerName: 'PR', field: 'pr' }
                    ],
                    //需要显示的数据
                    rowData: [
                        { title: '谷歌', url: 'www.google', catalog: '搜索引擎', pr: 10 },
                        { title: '微软', url: 'www.microsoft.com', catalog: '操作系', pr: 10 },
                        { title: 'ITXST', url: 'www.itxst.com', catalog: '小站', pr: 1 },
                        { title: '淘宝', url: 'www.taobao.com', catalog: '电商', pr: 8 }
                    ]
                };
            },
            methods: {
                //ag-grid创建完成后执行的事件
                onGridReady(params) {
                    console.log(params);
                    // 获取gridApi
                    this.gridApi = params.api;
                    this.columnApi = params.columnApi;
                    // 这时就可以通过gridApi调用ag-grid的传统方法了
                    this.gridApi.sizeColumnsToFit();
                },
                //插入数据
                add() {
                    this.rowData.push({ title: '亚马逊', url: 'www.amazon.com', catalog: '电商', pr: 8 });
                }
            }
        });
    </script>
</body>
</html>