const onInit = ($vm) => {
  gridRef = $vm;

   //主从明细表(不是一对多)
  //编辑弹出框打开时默认不加载明细表数据
  gridRef.detailOptions.load = false;
  //明细表设置单选
  gridRef.detailOptions.single = true;
  //明细表设置单选
  gridRef.detailOptions.single = true;
  //明细表表格的高度
  gridRef.detailOptions.detailHeight = 300;
      //明细表分页、默认排序
  gridRef.detailOptions.pagination={
            total: 0,
            size: 30,//默认分页大小写
            sizes:[10,20,30,60],
            sortName: "排序字段",
            order:"asc/desc"//排序方式
    }



  //编辑弹出框打开时默认不加载二级表数据
  gridRef.details[0].load = false;
  //二级表设置单选
  gridRef.details[0].single = true;
  //三级表设置单选
  gridRef.subDetails[0].single = true;
  //设置二、三级表格的高度
  gridRef.detailHeight = 300;

  //设置二、三级表显示在一行上(左右结构显示，默认是上下结构)
  gridRef.multiple.horizontal = true;
  //其他属性
  //   multiple:{
  //     horizontal:false, //一对多水平显示(二级表与三级表是否左右结构显示)
  //     leftWidth:0,//左边二级表宽度(默认不用设置)
  //     rightWidth:0//右边三级表宽度(默认不用设置)
  //   },

  //二级表分页、默认排序
  gridRef.details[0].pagination = {
    total: 0,
    size: 30, //默认分页大小写
    sizes: [10, 20, 30, 60],
    sortName: "排序字段",
    order: "asc/desc", //排序方式
  };
  //三级表分页信息
  //二级表设置合计
  gridRef.subDetails[0].gridRef.details[0].summary = true; //操作同上
  //开启字段合计
  gridRef.details[0].columns.forEach((col) => {
    if (col.field == "字段") {
      col.summary = true;
    }
  });
  //三级表设置合计同上  gridRef.subDetails[0]
  //明细表内部超出是否换行显示
  gridRef.details[0].textInline = true; //三级表  gridRef.subDetails[0].textInline=true
};

//生成的vue标签上添加方法
<view-grid :searchDetailBefore="searchDetailBefore" :searchDetailAfter="searchDetailAfter"></view-grid>

//主从表、二、三级表加载(查询)前方法
const searchDetailBefore=(param, table, item)=>{
    //判断是哪张表
    if(table=='表名'){
       //返回的数据:data.rows
    }
    param.value='xx'//可以设置一些参数，然后重写后台主表的GetDetailPage方法从pageData.value里面取值
    //见后台开发文档上的[明细表查询]
    return true; //  return false不会加载数据
}
//从表、二、三级表加载(查询)后方法(后台接口查询返回的参数)
const searchDetailAfter=(data, table, item)=>{
    //判断是哪张表
    if(table=='表名'){
       //返回的数据:data.rows
    }
      return true;
}

//动态判断明细表某个字段是否可以编辑
const onInit=($vm)=>{
    gridRef=$vm;
     
    // 主从明细表（不是一对多）
    gridRef.detailOptions.columns.forEach(col=>{
            if(col.field=='字段'){
                col.checkEdit=(row, column,index)=>{
                   return row.要判断字段==值
                }
            }
      })

    //一对多
    //方式1：根据行的值判断表格字段是否可以编辑
     gridRef.details[0].columns.forEach(col=>{
            if(col.field=='字段'){
                col.checkEdit=(row, column,index)=>{
                   return row.要判断字段==值
                }
            }
      })

    //方式2：二级表点击进入编辑方法
    gridRef.details[0].beginEdit=(row, column, index)=>{
        //可以判断某些或者校验决定是否可以开启编辑
        //也可以根据row.字段值设置其他列是否可以编辑，如:
        gridRef.details[0].columns.forEach(col=>{
            if(col.field=='字段'){
                //根据字段的值设置另一个字段是否可以编辑
               col.readonly=row.字段2=='xx';
            }
        })
       return true//return false不会结束编辑
    }

    //二级表行结束编辑方法
    gridRef.details[0].endEditBefore=(row, column, index)=>{
        //可以判断某些或者校验决定是否可以结束编辑
       return true//return false不会结束编辑
    }

    //三级表操作同上,this.subDetails[0]

  //主从明细表(不是一对多)，将上面的gridRef.details[0]改为this.detailOptions
}

//二级表ref对象
gridRef.getTable("表名");

//获取二级表所有行数据
const rows = gridRef.getTable("表名").rowData;

//二级表添加一行数据
const rows = gridRef.getTable("表名").rowData;
rows.push({ a: 1, b: 2 });

//二级表添加多行数据
const rows = gridRef.getTable("表名").rowData;
rows.push(...[{ a: 1, b: 2 }, { 行数据2 }, { 行数据3 }]);

//或者使用unshift添加到第一行
rows.unshift({});

//获取选中行
const rows = gridRef.getTable("表名").getSelected();

//原生element table组件对象获取
const table = gridRef.getTable("表名").$refs.table;

// 三级明细表操作,操作同上二级表;

 const onInited=()=>{
      //主从明细表(不是一对多)
    gridRef.detailOptions.buttons.push({
        name: "按钮名字", //按钮名称 参照iview buttons设置此属性
        hidden: false, //是否隐藏按钮
        value: "唯一值，随便填", //
        icon: "图标", //https://element.eleme.cn/#/zh-CN/component/icon
        onClick: () => {
          //触发事件
        }
    });

    //获取二级表的按钮
    const buttons = gridRef.details[0].buttons; //0是第几个二级明细表的按钮
    //二级表添加一个按钮
    buttons.push({
      name:"按钮名字", 
      hidden: false, //是否隐藏按钮
      value: "唯一值，随便填", //
      icon: "图标",
      onClick: () => {
      },
    });
    //在指定位置添加一个按钮
    buttons.splice(2, 0, { 按钮配置 });

    //隐藏按钮
    buttons.forEach((x) => {
      if (x.name == "按钮名字") {
        x.hidden = true;
      }
    });
    //删除指定位置的按钮
    buttons.splice(2, 1);
 }
//三级明细表按钮配置 this.details[0]改为this.subDetails[0],其他操作同上二级表;