明细表自定义序号、行号

方式一:配置显示行号(不会保存到数据),见上面【table显示行号与checkbox】
查看代码


[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现

方式二:数据库保存行号

vue3代码
//将下面的Sequencen改为实际表字段
const onInited = async () => {
  //也可以启用明细表拖拽排序,见文档:生成页面文档->明细表拖动排序detailSortEnd
  //gridRef.detailOptions.sortable = true

  //设置按序号排序显示
  gridRef.detailOptions.pagination.sortName = "Sequence";  //明细表排序字字段
  gridRef.detailOptions.pagination.order = "asc"; //明细表排序方式desc或者asc

  gridRef.detail.columns.forEach(x => {
    if (x.field == 'Sequence') {
      x.readonly=true;//设置序号不可编辑
      //按填写顺序自动生成序号
      //1.注意:明细表超过100行生成序号会有问题
      //2.可参照上面文档[table设置分页条大小]调整分页或后台新建、编辑代码处理
      x.formatter = (row, column) => {
        //给字段设置值
        row.Sequence = row.elementIndex + 1;
        return row.Sequence;
      }
    }
  })

  //一对多明细表(多张明细表)
  gridRef.detais[0].columns.foEach(x=>)//其他配置同上
  
  //三级明细表
  gridRefs.subDetails[0].columns.foEach(x=>)//其他配置同上

}
Last Updated 2025/8/26 17:17:27