table 表格

表格组件

基本用法

• 1. 只需对表格列进行配置即可实现简单的CRUD
• 2. 双击行弹框编辑
• 3. 鼠标移到列头，可进行列过滤，列配置
• 4. 点击列头文字进行排序
• 5. 拖动调整列宽度
• 6. 拖动调整行高度功能
• 7. 高度为固定高度,固定表头，滚动内容
• 8. 支持单元格多选，多列选择，多行选择
• 9. 支持 excel 复制、粘贴功能

<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<35;i++){
  let row ={
    fid:(i+1),
    name:'姓名_'+i,   
    regdate:'2024-08-24 13:20:30',
    isadmin: i % 2==0 ?1:0,
    state: i % 2==0 ?'0':"1",
    remark:'remark'   
  };  
  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: {
      childTable: {
        title: "",
        type: "table",
        form: {
          col:{span:24}, 
          props:{          
            table:{            
              component:{
                rowKey:'fid',
                height:'350px',
                onRowContextmenu:(row,column,event)=>{
                  console.log(row,column,event);
                  event?.preventDefault();
                  event?.stopPropagation();
                },
                onHeaderContextmenu:(e)=>{
                  console.log(e);
                  e.event?.preventDefault();
                  e.event?.stopPropagation();
                }
              },
              props:{
                headerAlign:'center',
                showNumber:true,
                showCheckbox:false,
                enabledEdit:true,
                editMode:'childForm',
                enabledFilter:true,
                enabledSort:true,
                //enabledRowDrag:true
              }, 
              columns:{                             
                name: {
                  title: "姓名",
                  type: "text",                   
                  props:{
                    filterData:selectData,
                    filterType:'multiple',
                  },                                            
                  form:{             
                    rules:[{required:true,message:'姓名必填'}],  
                    col:{span:24},
                    props:{                     
                      search:{
                        isSearch:true,
                        col:{span:12}
                      }
                    }
                  }
                },                
                state:{
                  title:'状态',                 
                  type:'checkboxlist',                   
                  props:{
                    valueMember:'id',
                    textMember:'text',
                    filterData:dictData,
                    align:'center',
                    request:{
                      getDataRequest:(query)=>{
                        return {data:dictData}
                      }
                    },
                  },
                  form:{
                    col:{span:24}
                  }
                },
                regdate:{
                    title:'日期',
                    type:'datetime', 
                    form:{
                      col:{span:24}
                    }                     

                },
                isadmin:{
                  title:'复选框',
                  type:'switch',
                  props:{
                    align:'center'
                  },
                  form:{
                    col:{span:24}
                  }                 
                }               
              },
              data:[],
              tableToolbar:{
                show:true,
                title:'基础表格',
                position:'top',
                buttons:{
                    add:{
                        show:true 
                    },
                    edit: {
                        show:true
                    },
                    delete:{
                        show:true
                    }                      
                }                                            
              }, 
            },   
            childForm:{
              props:{
                title:'弹框编辑'
              }
            },
            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;
                },
                saveRequest:({row,rows,key})=>{                
                  console.log(rows);                  
                  return {fid:999};
                },
                deleteRequest:({rows,rowIds})=>{                    
                },
                infoRequest:({mode,row})=>{                    
                    return row;
                },              
            },
            search:{
                show:true, 
                container:{
                    col:{span:12},  
                }
            },
            form:{                           
              beforeSubmit(scope){
                console.log('beforesubmit',scope);
              },
              async submit(context){
                //这里覆盖了框架保存，需要自己保存                 
                let mode =formRef.value.children.childTable.formBinding.mode?.name;                               
                dn.notification.info("submit表单提交:" + JSON.stringify(context.form));
                if (context.mode === "edit") {                
                  if (mode === "local") {              
                    formRef.value.children.childTable.updateRow(context.index, context.form);
                  } else {      
                    //这里回发后台请求,返回保存后的数据或包含主键ID的json               
                    return {fid:context.form.fid};
                  }
                } else if (context.mode === "add") {                 
                  if (mode === "local") {                   
                    formRef.value.children.childTable.insertRow(0, context.form);
                  } else {
                    //这里回发后台请求,返回保存后的数据或包含主键ID的json               
                    return {fid:999};
                  }
                }
              },
              afterSubmit(scope){
                console.log('aftersubmit:',scope);
              }
            } 
          }       
        }
      }
    }
  });
}

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

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

table 容器 API

PropsName	Description	Type	Default
key	字段名称子组件column配置	json
└ title	标题	string
└ type	table	string
└ form	表单栏位配置	json
└└ col	el-col配置，参考原生组件	json
└└ props	组件属性	json
└└└ table	表格配置	json
└└└└ ......	表格配置参考下面tableapi描述	json
└└└ childForm	弹窗子窗体配置	json
└└└└ formComponent	子窗体自定义表单组件	string	自动根据栏位生成
└└└└ formProps	传递给子窗的props参数
└└└└ closeRefresh	子窗体关闭后刷新表格	boolean	false
└└└└ props	属性配置
└└└└└ title	弹窗标题	string
└└└└└ router	子窗体路由
└└└└└ onBeforeOpen	子窗体打开前
└└└└└ onOpened	子窗体打开后
└└└└└ onBeforeClose	子窗体关闭前
└└└└└ onClosed	子窗体关闭后
└└└└└ width	子窗体宽度	string | number
└└└└└ height	子窗体高度	string | number
└└└└└ dialogMode	弹框模式 空 drawer	string
└└└└└ toolbarPosition	子窗体工具栏位置	'top'|'bottom'|'form'|formBottom'
└└└└ buttons	子窗体按钮	json
└└└└└ confirm	确认按钮	json	默认实现
└└└└└ cancel	关闭按钮	json	默认实现
└└└└└└ key	按钮配置
└└└└└ key	其它按钮	json
└└└ slots	组件槽位，	json
└└└└ key	组件槽位
└└└ request	api请求配置	json
└└└└ getDataRequest	数据分页请求
└└└└ saveRequest	保存数据请求
└└└└ deleteRequest	删除数据请求
└└└└ infoRequest	获取单条数据
└└└ search	查询配置	json
└└└└ show	是否显示查询栏	boolean	false
└└└└ container	查询栏容器	json
└└└└└ col	el-col配置，参考原生组件	json
└└└└└ buttonColSpan	查询按钮栏占位span	number	4
└└└└ buttons	查询按钮配置	json
└└└└└ search	查询按钮	json
└└└└└└ key	按钮配置，参考按钮配置	json
└└└ form	默认弹窗的表单配置，参考Form
└└└└ key	原生el-form组件属性,参考原生form组件
└└└└ row	row 配置	json
└└└└ col	列配置	object
└└└└ beforeSubmit	表单校验完完成后，提交前处理
└└└└ submit	点击保存按钮时执行操作，将覆盖reques.saveRequest
└└└└ afterSubmit	表单提交后处理

table 容器 Slots

Name	Description
key_toolbar	工具栏Title槽位
key_table-header	表格头部
key_table-bottom	表格底部

table 容器 Exposes

Name	Description
formBinding	表格绑定属性
formExpose	表格操作对象
tableRef	原生table组件

table API

PropsName	Description	Type	Default
...key	上级key，见table容器api	json
└ table	表格配置	string
└└ component	原生组件属性	json
└└└ rowKey	数据行键key，一般为主键字段	string
└└└ height	表格高度
└└└ border	是否显示表格边框	boolean
└└└ stripe	是否奇偶行背景	boolean
└└└ onHeaderContextmenu	列头右击事件
└└└ onRowContextmenu	行右击事件
└└└ default-expand-all	树时是否展开所有	boolean
└└└ tree-props	树配置	json
└└└└ checkStrictly	复选框时父子节点是否不关联	boolean	false
└└└└ key	参考原生el树组件
└└ props	表格属性
└└└ highlightCurrentRow	高亮当前行	boolean
└└└ headerAlign	列头对齐方式
└└└ align	单元格对齐方式
└└└ showNumber	是否显示序号列	boolean
└└└ numberFixed	序号列是否固定	boolean
└└└ showCheckbox	是否显示复选框列	boolean
└└└ checkBoxFixed	复选框列是否固定	boolean
└└└ enabledFilter	是否启用列头过滤	boolean
└└└ enabledSort	是否启用列头排序	boolean
└└└ enabledEdit	是否启用编辑	boolean
└└└ editMode	编辑模式		childForm
└└└ rowHeight	表格行高,px单位
└└└ rowMaxHeight	表格最大行高,px单位	string
└└└ linkSaveRefreshCtl	保存表格后刷新的关联组件	string
└└└ linkChildCtl	选择行关联刷新的子组件	string
└└└ linkChildCtlWhere	选择行关联刷新的子组件的Where条件	string
└└└ contextMenu	右键菜单
└└└ mergeColumns	合并列
└└└ mergeRows	合并行
└└└ mergeCell	自定义合并单元格函数
└└└ enabledRowDrag	启用行拖动排序功能	boolean
└└└ cellFocus	单元格高亮	boolean	true
└└└ cellMultiple	单元格多选(开启后自动开启复制粘贴功能)	boolean	false
└└└ rowResizable	拖动调整行高	boolean	false
└└└ headerCellMultiple	列头，行序号拖动多选	boolean	false
└└└ headerCellFocus	列头，行序号高亮	boolean	false
└└└ rememberChecked	分页记住勾选行	boolean	false
└└└ readonly	只读	boolean |	false
└└└ classFn	样式	boolean |
└└└ dataBind	数据绑定属性	json
└└└└ sortStr	排序字符串	string
└└└└ where	绑定数据条件	WhereCompare[]
└└└ events	事件	json
└└└└ onCurrentChange	点击行数据时
└└└└ onSelectionChange	点击复选框勾选时触发
└└└└ onRowDblclick	双击行事件
└└└ slots	组件槽位，	json
└└└└ cell	单元格槽位，	json
└└└└└ cell_columnKey	单元格槽位
└└ columns	列配置	json
└└└ key	字段key	json
└└└└ title	标题	string
└└└└ type	类型，参考组件类型,linkcol为表格列专用	string
└└└└ props	属性配置	json
└└└└└ enabledSort	启用排序	boolean
└└└└└ enabledFilter	启用过滤	boolean
└└└└└ enabledEdit	启用编辑	boolean
└└└└└ headerAlign	列头对齐方式
└└└└└ align	单元格对齐方式
└└└└└ columnShow	表格列显示	boolean
└└└└└ width	列宽度	number
└└└└└ filterType	过滤类型
└└└└└ filterData	multiple或下拉类型时的过滤下拉项	array
└└└└└ valueMember	下拉项的value	string
└└└└└ textMember	下拉项的text	string
└└└└└ request	请求配置	json
└└└└└└ getFilterData	filterData的请求配置
└└└└└└ getDataRequest	下拉选项的请求配置
└└└└ form	编辑表单配置	json
└└└└└ key	编辑时需要配置，参考表单配置-form项	json
└└└└└ props	表单配置	json
└└└└└└ defaultCopy	新增时是否复制最后一行数据	boolean	false
└└└└└└ search	查询配置	json
└└└└└└└ isSearch	是否查询	boolean	false
└└└└└└└ defaultValue	查询默认值
└└ tableConfig	列配置
└└└ storage	存储配置的key，默认表单的[key]		key
└└ tableToolbar	工具栏位置
└└└ show	是否显示	boolean
└└└ position	工具栏位置
└└└ buttons	按钮,默认：新增，修改，删除	json
└└└└ add	新增按钮	json	默认实现
└└└└└ show	显示新增按钮	boolean	false
└└└└ edit	编辑按钮	json	默认实现
└└└└└ show	显示编辑按钮	boolean	false
└└└└ delete	删除按钮	json	默认实现
└└└└└ show	显示删除按钮	boolean	false
└└└└ buttonkey	其他自定义按钮	json
└└└└ close	删除按钮	json	默认实现
└└└└└ show	是否显示	boolean	false
└└└└└ key	参考button	json
└└└└└ debounce	按钮防抖属性	boolean	false
└└└└└ delay	按钮防抖延迟	number	2000

table 事件

Name	Description
原生事件	component下写事件，参考原生组件事件

table Slots

Name	Description
cell_columnKey	单元格槽位