多级表头 表格

多级表头表格

基本用法

<template>
    <dn-page>     
      <dn-form ref="formRef" v-bind="formOptions"></dn-form>
    </dn-page>   
  </template>
  
<script lang="jsx">
import {ref,defineComponent, onMounted} from "vue";
import { useForm,dn } from "@sdevnet/devnet-form";

const formRef = ref();
const formOptions = ref();

let data=[];
for(var i=0;i<8;i++){
    let row = {
        fid:(i+1),
        name:'User Name'+i,
        regcap:i + 35.67893,
        regdate:new Date(),
        isadmin: i % 2==0 ?1:0,
        remark:'备注'+i,
        state: i % 2==0 ?'0':"1",
    };   
    data.push(row)
}
let selectData=[];
for(var i=0;i<10;i++){
  selectData.push({
    value:(i+1),
    text:'Name'+i
  })
}

let dictData=[
  {id:"1",text:'打开',type:'primary'},
  {id:"0",text:'关闭',type:'danger'}
];

function createFormOptions() {  
  const { buildFormOptions } = useForm();
  return buildFormOptions({
    columns: {
      childMultileTable: {
        title: "",
        type: "table",
        form: {
          col:{span:24}, 
          props:{          
            table:{            
              component:{
                rowKey:'fid',
                height:'auto',
                'default-expand-all':true
              },
              props:{
                headerAlign:'center',
                showNumber:true,
                enabledFilter:true,
                enabledSort:true
              }, 
              columns:{                             
                name: {
                  title: "姓名",
                  type: "text",                   
                  props:{
                    filterData:selectData,
                    filterType:'multiple',
                  }
                },  
                mulitlHeader:{
                    title:'多级表头',
                    children:{
                        state:{
                            title:'状态',                 
                            type:'checkboxlist',                   
                            props:{
                                valueMember:'id',
                                textMember:'text',
                                filterData:dictData,
                                align:'center',
                                request:{
                                  getDataRequest:(query)=>{
                                    return {data:dictData}
                                  }
                                },
                            },
                            form:{
                            }
                        },
                        regdate:{
                            title:'日期',
                            type:'datetime'
                        }
                    }
                }, 
                isadmin:{
                  title:'复选框',
                  type:'switch',
                  props:{
                    align:'center'
                  }             
                }               
              },
              data:[]             
            },               
            request:{
              getDataRequest:(query)=>{  
                  let sort= query.sort;             
                  let sortName='fid';
                  let order='asc';
                  if(sort && sort.length>0){                    
                     sortName=sort[0]['sortname'] ?? 'fid';
                     order = sort[0]['sortorder'] ?? 'asc';
                  }                  
                  data.sort((a,b)=>{
                    if(a[sortName]<b[sortName]){
                      return order==='asc'? -1 : 1;
                    }
                    if(a[sortName]>b[sortName]){
                      return order==='asc'? 1 : -1;
                    }
                    return 0;
                  });
                  
                  var ret={data:[]};
                  for(var i=((query.pageIndex-1) * query.pageSize);
                        i<((query.pageIndex) * query.pageSize);
                        i++){
                      if(i<data.length){
                        ret.data.push(data[i]);
                      }
                  }
                  var pcount= parseInt(data.length / query.pageSize);
                  if((data.length % query.pageSize) !== 0){
                    pcount++;
                  }                  
                  ret.pageindex=query.pageIndex;
                  ret.pagesize=query.pageSize;
                  ret.rowcount=data.length;
                  ret.pagecount=pcount;     
                  dn.message.success('模拟数据哦');
                  return ret;
                }                      
            }       
          }       
        }
      }
    }
  });
}

function initFormOptions() { 
  formOptions.value = createFormOptions();
  formOptions.value.initData = { fid:1,childMultileTable:[]};
  
  return {
    formOptions,   
    formRef
  };
}

export default defineComponent({
  setup(props,ctx) {  
    onMounted(()=>{
      formRef.value.children.childMultileTable.refresh();       
    });
   
     return {
      ...initFormOptions()
     }
  }
});
</script>

table API

参考 表格api

多级表头配置 API

PropsName	Description	Type	Default
...key	上级key，见tableapi	json
└ table	表格配置	string
└└ columns	列配置	json
└└└ mulitlHeader	列配置	json
└└└└ title	多级表头标题	string
└└└└ children	子列	json
└└└└└ key	字段key,参考tableapi-columns节点
└└└└└└ title	标题	string
└└└└└└ type	类型，参考组件类型	string