当前位置: 首页 > Web前端 > HTML5

一个普通的vue表格组件

时间:2023-04-05 01:27:20 HTML5

在做业务组件的时候,需要自己封装一个总表。这个表格需要满足我们所有的美好幻想,固定左右,固定表头,固定分页,选择,表格内容行数限制。下面就为大家介绍一下这个表格组件的功能和使用方法。首先,我会给你原始的演示博客。installnpminstallvue-table2基本上使用importvueTablefrom'vue-table2'编辑删除disable/*constcolumns1=[{title:'机构编号',key:'number',width:85,textAlign:'left'},{title:'机构名称',key:'name',width:292,textAlign:'left',textLine:2,selectText:true},{title:'类型',键:'type',width:180,textAlign:'center'},{title:'status',key:'brand',width:82,textAlign:'center'}]*/column配置请参考下面说明(columns)name必须默认指定title为表头标题key为keyvalue数据width为列宽和最小宽度(左对齐)center(居中)right(右对齐)属性配置说明table组件(tableconfig)name类型必须默认指定tdataArray是渲染表格的数据tcolumnsArray是表格列的配置No是否显示正确的操作内容titleHeightNumber32NoHeader高度tdHeightNumber50NoCell高度titleFixedString'auto'Noheader是否固定,默认为'auto'(不固定),'fixed'(固定),注意:需要指定固定header滚动内容的高度(scrollHeight)scrollHightNumer400否滚动内容的高度selectFixedBooleanfalse否左侧是否固定handleFixedBooleanfalse否右侧是否固定pageObject否如果不配置该页面,则不显示底部页码。如果配置{totalPage:50,maxSize:5}(totalPage)总页数,(maxSize)显示页码事件相关名称必须指定clickItem每行被点击时不触发事件changePage页码变化时不触发事件selectCheck不触发事件当左侧的复选框被选中时slot描述操作模板slot编辑删除禁用template>ps:如果觉得对你有用,请点击开始,你的支持是我最大的动力github:https://github.com/naihe138/vue-table