treeTable 表格

树表格组件

基本用法

• 树数据中包括 children 子数据即可展示树表格
• 高度 auto

<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<2;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",
    };
    
    row.children=[];
    for(var j=0;j<3;j++){
        var crow={
            fid:(j+1)*100,
            name:'child'+j+'_1',
            regcap:j + 3.768,
            regdate:new Date(),
            isadmin: j % 2==0 ?1:0,
            remark:'备注'+i,
            state: j % 2==0 ?'0':"1"
        };
        row.children.push(crow);
    }       
    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: {
      childTreeTable: {
        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',
                  }
                },                
                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:[],
              tableToolbar:{
                show:false                                  
              } 
            },               
            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;
                }                      
            },
            search:{
                show:false
            }            
          }       
        }
      }
    }
  });
}

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

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

treeTable API

参考 表格api