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

uniapp表格组件

时间:2023-04-02 12:46:54 HTML

uniapp是2019年非常流行的Dcloud开发跨平台前端工具,支持ios安卓wap和小程序。除了android有点卡,暂时没发现其他缺陷。最近在做uniapp项目,正好用到了表格组件。之前写过一个demo,一直想写一个像样的组件,可以分享给大家。本人水平一般,开发的组件代码可能不是很好,还望路人指正。下面是我写的uniapptable的说明。我希望它可以帮助别人。默认情况下,这里的每个人都非常熟悉vue和uniapp包的介绍。uniapp组件的引入方法以及uniapp组件和vue的区别我就不细说了。插件市场更新相比github更新会有所延迟,查看github项目插件市场更新会比github更新延迟,查看demo源码插件市场更新会比github更新延迟,使用介绍方法查看demo支持功能如下点击查看demo,PC浏览器模拟显示和真实移动设备访问有区别rowmergecolumnmergefixedtableheightdataloadingdataisemptycustomrowstylecustomrowstylecustomrowcertaincolumncertaincellstyleuseslotcustomcellcontent数据多选操作数据单选操作数据删除&&数据编辑或更多操作方法固定右栏固定左栏固定高度不支持同时固定一栏已测试平台->ios、android、wap、微信小程序部分效果预览基本用法示例源码htmljavascript(data数组必须提供id)importvTablefrom"@/components/table.vue"exportdefault{components:{vTable},data(){return{data:[{name:'JohnBrown',age:18,address:'NewYorkNo.1LakePark',id:"1",}],列:[{标题:“ID”,key:"id"},{title:'Name',key:'name'},{title:'Age',key:'age'},{title:'Address',key:'address'}],}}}基本属性html标签属性属性描述类型默认必填列列数据Array--必填dataColSpan行数据Array--必填row-class-name行样式StringorFunction----height表格高度(可固定Header)Number--td-height单元格高度Number110--td-width单元格宽度Number30--td-padding单元格间距Number10--border-color表格边框颜色String#666--th-td-height表头单元格高度Number30--loadingloadingstatusBooleanfalse--selectionoptionalmulitandsingleString----span-methodRowandColumnMergeFunction----slot-cols自定义列元素,对应columns的keyArray------emptyText插入无数据提示文字String----emptyClickFn无数据点击响应函数Function----事件属性描述参数@on-selection-change单选多选变化{old:"",new:""}@delete自定义事件(可以不被称为德尔ete,可以是任何事件,只要在列表中定义即可){row:{},index:Number}list参数属性描述类型cellClassName设置行中某一列的样式类名Objectoperate数据操作列Objectcolumnsparameterattributedescriptiontype$width设置列宽,如“120px”,请务必使用px单位String$fixed固定某列,可选left和rightString$operateList数据操作选项和list的operate对应Array