<script setup lang="jsx">
    //表单值对象
    editFormFields
</script>

<script setup lang="jsx">
    editFormFields.字段=值
</script>

<script setup lang="jsx">
  const detailHeight = 100
</script>

<script setup lang="jsx">
   if(isAdd){

   }
</script>

<script setup lang="jsx">
   //只有编辑时才有值
   const id= route.query.id;
</script>

<script setup lang="jsx">

//生成的edit已经内置了，直接使用即可
const { proxy } = getCurrentInstance()

proxy.http.post("url",参数,true).then(res=>{

})
</script>

<script setup lang="jsx">

//生成的edit已经内置了，直接使用即可
const { proxy } = getCurrentInstance()
proxy.$message.success("提示信息")
proxy.$message.error("提示信息")
</script>

见上面【新页面编辑说明】截图效果，生成的edit.vue文件已内置，在文件中提示的【自定义数据槽显示】位置即自定义数据槽

//编辑时才会执行
<template>
// 在生成的edit.vue文件vol-edit标签添加@loadFormBefore="loadFormBefore"方法
  <vol-edit ref="edit"
    :loadFormBefore="loadFormBefore"
  ></vol-edit>
</template>

<script setup lang="jsx">

//页面加载时获取表单字典数据
const loadFormBefore = (params,callback) => {
    //params为查询条件参数
 callback(true)//返回false不会加载数据
}

</script>

//编辑时才会执行
<template>
// 在生成的edit.vue文件vol-edit标签添加@loadFormBefore="loadFormBefore"方法
  <vol-edit ref="edit"
    :loadFormBefore="loadFormBefore"
  ></vol-edit>
</template>

<script setup lang="jsx">

//页面加载时获取表单字典数据
const loadFormAfter = (result) => {
   //result后台返回的表单数据
   //formFields为当前表单数据，在此方法也可以直接设置值
}
</script>

 edit.value.reset();

//重置表单也可以设置一些默认值
 //edit.value.reset({字段:值});

<template>
// 在生成的edit.vue文件vol-edit标签添加@dicInited="dicInited"方法
  <vol-edit ref="edit"
    @dicInited="dicInited"
  ></vol-edit>
</template>

<script setup lang="jsx">

//页面加载时获取表单字典数据
//dicData返回的字典数据
//table，对应明细表的字典，table没有值时为表单加载的数据
const dicInited = (dicData,table) => {
}

</script>

//新建时点保存按钮事件
<template>
// 在生成的edit.vue文件vol-edit标签添加:addBefore="addBefore"方法
  <vol-edit ref="edit"
    :addBefore="addBefore"
  ></vol-edit>
</template>

<script setup lang="jsx">

//页面加载时获取表单字典数据
const addBefore = (formData,callback) => {
    //formData提交的表单数据
    callback(true);//返回false不会执行保存
}

</script>

//新建时点保存按钮事件，后台接口返回事件
<template>
// 在生成的edit.vue文件vol-edit标签添加:addAfter="addAfter"方法
  <vol-edit ref="edit"
    :addAfter="addAfter"
  ></vol-edit>
</template>

<script setup lang="jsx">

const addAfter = (result,callback) => {
    //formData提交的表单数据
    callback(true);//返回false不会执行保存
}

</script>

//编辑时点保存按钮事件
<template>
// 在生成的edit.vue文件vol-edit标签添加:updateBefore="updateBefore"方法
  <vol-edit ref="edit"
    :updateBefore="updateBefore"
  ></vol-edit>
</template>

<script setup lang="jsx">


const updateBefore = (formData,callback) => {
    //formData提交的表单数据
    callback(true);//返回false不会执行保存
}

</script>

//编辑时点保存按钮事件，后台接口返回事件
<template>
// 在生成的edit.vue文件vol-edit标签添加:updateAfter="updateAfter"方法
  <vol-edit ref="edit"
    :updateAfter="updateAfter"
  ></vol-edit>
</template>

<script setup lang="jsx">

//页面加载时获取表单字典数据
const updateAfter = (result,callback) => {
    //formData提交的表单数据
    callback(true);//返回false不会执行保存
}

</script>

//默认只会提交修改的明细表数据，设置为true会提交所有加载的明细表数据
<template>
// 在生成的edit.vue文件vol-edit标签添加:submitChangeRows="true"方法
  <vol-edit ref="edit" :submitChangeRows="true"></vol-edit>
</template>

<template>
//在生成的edit.vue文件中操作
  <vol-edit ref="edit" ></vol-edit>
</template>

<script setup lang="jsx">
editFormOptions.forEach((option) => {
        option.forEach((item) => {
          if (item.field == '字段') {
            item.extra = {
              btnValue: '发送短信',
              render: (h, {}) => {
                return (
                  <div>
                    <el-button
                      type="primary"
                      link
                      onClick={() => {
                          proxy.$message.success('点击了按钮')
                      }}
                    >
                      <i class="el-icon-search">选择</i>
                    </el-button>
                    <el-button
                      type="primary"
                      style="margin-left:0"
                      link
                      onClick={() => {
                        //设置倒计时
                        var timer = setInterval(function () {
                          if (countdown > 0) {
                            item.extra.btnValue=countdown+'(秒)'
                            countdown--
                          } else {
                              //给倒计时按钮设置值
                            item.extra.btnValue='发送短信';
                            countdown=10;
                            clearInterval(timer)
                          }
                        }, 1000)
                      }}
                    >
                      <i class="el-icon-message">{item.extra.btnValue}</i>
                    </el-button>
                  </div>
                )
              }
            }
          }
        })
})

</script>

<template>
//在生成的edit.vue文件中操作
  <vol-edit ref="edit" ></vol-edit>
</template>

<script setup lang="jsx">
editFormOptions.forEach((ops) => {
  ops.forEach((x) => {
    if (['字段1','字段2'].includes(x.field)) {
      x.group = "基础信息";
    } else if (['字段3','字段4'].includes(x.field)) {
      x.group = "供应商资质";
    } else {
      x.group = "供应商信息";
    }
  });
});
</script>

见上面[表单自定义按钮]配置按钮及触发事件，再接着在当前页面加一个弹出框组件显示

<template>
// 在生成的edit.vue文件vol-edit标签添加:loadTableBefore="loadTableBefore"两个方法
  <vol-edit ref="edit" :loadTableBefore="loadTableBefore"></vol-edit>
</template>

<script setup lang="jsx">
//明细表加载前方法
const loadTableBefore = (params, callback,table,item) => {
   
   //params明细表查询参数
   //table查询的明细表(一对多的明细表时才有值)
   //item明细表配置(一对多的明细表时才有值)

   callback(true);//返回false不会加载明细表数据
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加:loadTableAfter="loadTableAfter"两个方法
  <vol-edit ref="edit" :loadTableAfter="loadTableAfter"></vol-edit>
</template>

<script setup lang="jsx">
//明细表从数据库加载后方法，可以给明细重新设置值
const loadTableBefore = (rows,result, callback,table,item) => {
   
   //rows返回的明细表数据
   //result接口返回的完整数据
   //table查询的明细表(一对多的明细表时才有值)
   //item明细表配置(一对多的明细表时才有值)

   callback(true);//返回false不会加载明细表数据
}
</script>

  detail.columns

<template>
// 在生成的edit.vue文件vol-edit标签添加@initDetailColumns="initDetailColumns"两个方法
  <vol-edit ref="edit"
    @initDetailColumns="initDetailColumns"
    @initSubDetailColumns="initSubDetailColumns"
  ></vol-edit>
</template>

<script setup lang="jsx">

//初始化一对多二级表格配置
const initDetailColumns = (detailColumns) => {
   //detailColumns里面包括多张明细表按钮、表格等配置信息
}
//初始化一对多三级表格与按钮
const initSubDetailColumns = (subDetailColumns) => {
  //操作同上initDetailColumns
}

//一对多二级表格配置可直接使用details对象
details[0].columns;
details.foEach(item=>{})

</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加
  <vol-edit ref="edit" :addRow="addRow"
  ></vol-edit>
</template>

<script setup lang="jsx">

  const addRow=(table,ops)=>{
      //判断表，如果是一对一主从明细表不需要if判断
      if(table==='表名'){
        return {字段1:值2,字段2:值2}
      }
  }

</script>

  edit.value.getTable('明细表表名')

  const rows= edit.value.getTable('明细表表名').rowData;

  const rows= edit.value.getTable('明细表表名').rowData;
  //添加到最后一行
  rows.push(...[{字段:"值"},{字段:"值"}])

  //添加到第一行
  rows.unshift(...[{字段:"值"},{字段:"值"}])

  const rows= edit.value.getTable('明细表表名').getSelected();

  edit.value.getTable('明细表表名').toggleRowSelection(row);//row为需要选中的行

  edit.value.loadDetail('表名');//刷新指定明细表数据

<template>
// 在生成的edit.vue文件vol-edit标签添加@dicInited="dicInited"方法
  <vol-edit ref="edit"
    @dicInited="dicInited"
  ></vol-edit>
</template>

<script setup lang="jsx">
//页面加载时获取表单字典数据
//dicData返回的字典数据
//table，对应明细表的字典，table没有值时为表单加载的数据
const dicInited = (dicData, table) => {
  //dicData:字典数据对象
  //table:表名(可选)，对应明细表的字典，table没有值时为表单加载的数据
  console.log('字典数据加载完成', dicData, table)
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@beginEdit="beginEdit"方法
  <vol-edit ref="edit"
    @beginEdit="beginEdit"
  ></vol-edit>
</template>

<script setup lang="jsx">
//明细表开始编辑事件
const beginEdit = (row, column, index) => {
  //row:行数据
  //column:列配置
  //index:行索引
  console.log('开始编辑', row, column, index)
  return true //返回false可以阻止编辑
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@endEditBefore="endEditBefore"方法
  <vol-edit ref="edit"
    @endEditBefore="endEditBefore"
  ></vol-edit>
</template>

<script setup lang="jsx">
//明细表结束编辑前事件
const endEditBefore = (row, column, index) => {
  //row:行数据
  //column:列配置
  //index:行索引
  console.log('结束编辑前', row, column, index)
  //可以在这里进行数据验证
  if (!row.字段) {
    proxy.$message.error('字段不能为空')
    return false //返回false可以阻止结束编辑
  }
  return true
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@loadFormAfter="loadFormAfter"方法
  <vol-edit ref="edit"
    @loadFormAfter="loadFormAfter"
  ></vol-edit>
</template>

<script setup lang="jsx">
//表单数据加载后事件
const loadFormAfter = (result) => {
  //result:后台返回的表单数据
  console.log('表单数据加载完成', result)
  //可以在这里对表单数据进行处理
  //editFormFields为当前表单数据，在此方法也可以直接设置值
  //editFormFields.字段 = result.字段
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@initButtons="initButtons"方法
  <vol-edit ref="edit"
    @initButtons="initButtons"
  ></vol-edit>
</template>

<script setup lang="jsx">
//初始化主表按钮事件
const initButtons = (buttons) => {
  //buttons:按钮数组
  //splice在第三个按钮后面添加一个按钮,也可使用buttons.push或者unshift添加按钮到最后或最前
  buttons.splice(3, 0, ...[{
    name: '测试按钮', //按钮名称
    icon: 'el-icon-edit-outline', //按钮图标
    type: 'success', //type类型
    plain: true,
    onClick: () => {
      proxy.$message.success('点击了按钮')
    }
  }])
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@initDetailButtons="initDetailButtons"方法
  <vol-edit ref="edit"
    @initDetailButtons="initDetailButtons"
  ></vol-edit>
</template>

<script setup lang="jsx">
//初始化明细表按钮事件(主从表)
const initDetailButtons = (detailButtons) => {
  //detailButtons:明细表按钮数组
  //可以添加、删除或修改按钮
  detailButtons.push({
    name: '自定义按钮',
    icon: 'el-icon-edit-outline',
    type: 'primary',
    plain: true,
    onClick: () => {
      proxy.$message.success('点击了明细表按钮')
    }
  })
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@initDetailColumns="initDetailColumns"方法
  <vol-edit ref="edit"
    @initDetailColumns="initDetailColumns"
  ></vol-edit>
</template>

<script setup lang="jsx">
//初始化一对多二级表格配置事件
const initDetailColumns = (detailColumns) => {
  //detailColumns:二级明细表配置数组
  //detailColumns里面包括多张明细表按钮、表格等配置信息
  detailColumns.forEach((detail) => {
    //添加按钮
    detail.buttons.push({
      name: '二级表按钮',
      icon: 'el-icon-edit-outline',
      type: 'primary',
      onClick: () => {
        proxy.$message.success('点击了二级明细按钮')
      }
    })
    
    //修改表格列配置
    detail.columns.forEach((col) => {
      if (col.field == 'Remark') {
        col.edit = null
        col.render = (h, { row, column, index }) => {
          return (
            <div>
              <el-button link
                onClick={($e) => {proxy.$message.success('点击了图标') }}
                class="el-icon-search"
                style="color: #2196F3;cursor: pointer;"
              ></el-button>
              <span style="margin-left:5px">{row.Remark}</span>
            </div>
          )
        }
      }
    })
  })
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@initSubDetailColumns="initSubDetailColumns"方法
  <vol-edit ref="edit"
    @initSubDetailColumns="initSubDetailColumns"
  ></vol-edit>
</template>

<script setup lang="jsx">
//初始化一对多三级表格配置事件
const initSubDetailColumns = (subDetailColumns) => {
  //subDetailColumns:三级明细表配置数组
  //操作同上initDetailColumns
  subDetailColumns.forEach((detail) => {
    //添加按钮
    detail.buttons.push({
      name: '三级表按钮',
      icon: 'el-icon-edit-outline',
      type: 'primary',
      onClick: () => {
        proxy.$message.success('点击了三级明细按钮')
      }
    })
    
    //修改表格列配置
    detail.columns.forEach((col) => {
      if (col.field == 'Remark') {
        //自定义列渲染
        col.render = (h, { row, column, index }) => {
          return <span>{row.Remark}</span>
        }
      }
    })
  })
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@detailRowChange="detailRowChange"方法
  <vol-edit ref="edit"
    @detailRowChange="detailRowChange"
  ></vol-edit>
</template>

<script setup lang="jsx">
//明细表行选择变化事件
const detailRowChange = (row, item) => {
  //row:选中的行数据
  //item:明细表配置对象
  console.log('明细表行选择变化', row, item)
  //可以在这里根据选中的行数据加载三级明细表数据
  if (item && item.detail) {
    //加载三级明细表数据
    const tableRef = edit.value.getTable(item.detail.table)
    if (tableRef) {
      tableRef.load({ value: row[item.key] })
    }
  }
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@onSortEnd="onSortEnd"方法
  <vol-edit ref="edit"
    @onSortEnd="onSortEnd"
  ></vol-edit>
</template>

<script setup lang="jsx">
//明细表拖动排序结束事件
const onSortEnd = (rows, newIndex, oldIndex) => {
  //rows:排序后的行数组
  //newIndex:新索引
  //oldIndex:旧索引
  console.log('拖动排序结束', rows, newIndex, oldIndex)
  //可以在这里更新排序字段的值
  rows.forEach((row, index) => {
    row.SortNo = index + 1 //更新排序号
  })
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@tabsClick="tabsClick"方法
  <vol-edit ref="edit"
    @tabsClick="tabsClick"
  ></vol-edit>
</template>

<script setup lang="jsx">
//一对多明细表切换事件
const tabsClick = (table) => {
  //table:切换到的表名
  console.log('切换明细表', table)
  //可以在这里根据切换的表名执行相应操作
  if (table === '表名1') {
    //执行表名1相关操作
  } else if (table === '表名2') {
    //执行表名2相关操作
  }
}
</script>

<template>
// 在生成的edit.vue文件vol-edit标签添加@tabClick="tabClick"方法
  <vol-edit ref="edit"
    @tabClick="tabClick"
  ></vol-edit>
</template>

<script setup lang="jsx">
//表单分组点击事件
const tabClick = (name) => {
  //name:分组名称
  console.log('表单分组点击', name)
  //可以在这里根据分组名称执行相应操作
  if (name === '基础信息') {
    //执行基础信息相关操作
  } else if (name === '供应商信息') {
    //执行供应商信息相关操作
  }
}
</script>