移动端类表格组件封装

时间：2023-03-31 14:17:17 vue.js

@inputPaddingLeft:5px;@colPaddingLeft:10px;.fake-table/deep/.van-field__control{padding-left:@inputPaddingLeft;}.col/deep/.van-cell{padding:0;}.col/deep/.input-disabled{border:none;}.col/深/.input-abled{border:1pxsolid#DDDDDD;}.table-col{height:100%;显示：弹性；证明内容：flex-start；对齐项目：弹性启动；字体系列：PingFangSC-Medium,PingFangSC;颜色：#313131；}.fake-table{边距：012px；&__head,&__body{border:1pxsolid#DDDDDD;&:not(:last-child){border-bottom:none;}}&__head{高度：40px；背景：#F5FAFF；.col:extend(.table-col){字体大小：14px；字体粗细：500；行高：20px；填充：@colPaddingLeft；}}&__body{.col:extend(.table-col){字体大小：13px；字体粗细：400；行高：18px；填充：@colPaddingLeft@colPaddingLeft@colPaddingLeftcalc(@colPaddingLeft-@inputPaddingLeft);&:last-child{padding-left:@inputPaddingLeft;}}}}简介一个定制化程度不高的移动端表格组件，可以创建列数不定的表格（我自己写的，为了以后维护修改样式，封装到方便实现一个表头的思想循环：循环渲染每一列的列名表格内容双循环：外循环渲染行，内循环渲染每一行每一列的内容实现环境：vue+vantui，使用van-row+van-col模拟row和column//封装的表格组件

@inputPaddingLeft:5px;@colPaddingLeft:10px;.fake-table/deep/.van-field__control{padding-left:@inputPaddingLeft;}.col/deep/.van-cell{padding:0;}.col/deep/.input-disabled{border:none;}.col/深/.input-abled{border:1pxsolid#DDDDDD;}.table-col{height:100%;显示：弹性；证明内容：flex-start；对齐项目：弹性启动；字体系列：PingFangSC-Medium,PingFangSC;颜色：#313131；}.fake-table{边距：012px；&__head,&__body{border:1pxsolid#DDDDDD;&:not(:last-child){border-bottom:none;}}&__head{高度：40px；背景：#F5FAFF；.col:extend(.table-col){字体大小：14px；字体粗细：500；行高：20px；填充：@colPaddingLeft；}}&__body{.col:extend(.table-col){字体大小：13px；字体粗细：400；行高：18px；填充：@colPaddingLeft@colPaddingLeft@colPaddingLeftcalc(@colPaddingLeft-@inputPaddingLeft);&:last-child{padding-left:@inputPaddingLeft;}}}}使用//父组//html//scriptimportfakeTablefrom'../../components/fake-table'//...省略一些代码数据{return{tableHead:[{name:'materialname',//注意传入的列名span:'8',prop:'name'//注意传入的列的属性名必须和实际获取数据的属性名一致，比如matirialUsed数组中每一项的属性名},{name:'model',span:'6',prop:'model'},{name:'quantity',span:'5',prop:'num'},{name:'operation',span:'5',prop:''}],matirialUsed:[{name:'',model:'',num:'0',editDisable:true,//是否可以编辑},{name:'',model:'',num:'0',editDisable:true,},{name:'',model:'',num:'0',editDisable:true,},{name:'',model:'',num:'0',editDisable:true,}]}}，组件：{fakeTable}，方法：{editMatirial(idx){letflag=this.matirialUsed[idx]['editDisable']this.$set(this.matirialUsed[idx],'editDisable',!flag)},deleteMatirial(idx){让temp=this.matirialUsedtemp.splice(idx,1)this.matirialUsed=temp},}

上一篇：Vue组件递归——组件开发必备技能！

下一篇：vue-cli4.x创建企业级项目

移动端类表格组件封装相关文章