商品展示类网站源码,做受视频网站,域名备案用的网站建设方案,专业设计网站排名uniapp页面一般都会有像以下的列表页面#xff0c;封装通用组件#xff0c;提高开发效率#xff1b; #xff08;基于uView前端框架#xff09;
首先#xff0c;通过设计图来分析一下页面展示和数据结构定义 w-table组件参数说明
参数说明类型可选值默认值toggle列表是…uniapp页面一般都会有像以下的列表页面封装通用组件提高开发效率 基于uView前端框架
首先通过设计图来分析一下页面展示和数据结构定义 w-table组件参数说明
参数说明类型可选值默认值toggle列表是否带更多和收起功能toggle值为true时配合prop-list中定义的show字段使用show值为true时收起情况下默认展示的列false则默认不展示点击更多展开时展示toggle值为false时prop-list中定义的show值无效表示全部默认展示不需要展开收缩功能booleantrue|falsetrueprop-list定义的字段和列标题数组对应PC端封装表格组件内容格式一致例[{label:‘废物名称’,prop:‘name’},{label:‘数字识别码’,prop:‘code’}]array–[]table-data后台返回数据数组array–[]
prop-list具体参数说明
参数说明类型可选值默认值label列的标题名称如图废物名称string––prop字段名array–[]show列表收起时默认展示toggle为true时生效stringtrue|falsefalseformatItem整体列插槽例如上图俩个状态按钮列不展示左边标题名称则需要整体插槽实现booleantrue|falsefalseformatValue值插槽例如返回值需要加单位格式化等情况formatItem为true时此属性不生效booleantrue|falsefalse
propList数据格式
propList:[{label:废物名称,prop:title,show:true},{label:数字识别码,prop:name,show:true},{label:危废标识,prop:tag,show:true},{label:废物代码,prop:code,show:true},{label:废物重量,prop:weight,formatValue:true,show:true},//格式化值{label:废物形态,prop:name},{label:主要成分,prop:name},{label:有害成分,prop:name},{label:危险特性,prop:name},{label:注意事项,prop:name},{label:产生/收集单位,prop:comp},{label:联系人,prop:userName},{label:联系方式,prop:phone},{label:产生日期,prop:date},{label:备注,prop:remark},{label:状态,prop:status,formatItem:true,show:true},//格式化列默认展示{label:二维码,prop:qrcode,formatItem:true,show:false}//格式化列默认不展示
]tableData数据格式
tableData:[{title:HWCS20230908003,time:2023-09-18 14:00,name:废物名称,code:1234567890123456789000030420230915101,tag:7b9e9d22ca714365a1f6a6b338fc8fa3,code1:900-041-49,weight:30,unit:kg,wasteStatus:1,reportStatus:0,
}]具体代码
基础用法
w-table :table-datatableData :prop-listpropList :toggletrue/w-table有格式化值和列的情况
w-table :table-datatableData :prop-listpropList :toggletruetemplate slotheader slot-scopescopeview classwidth w-flex row row-between borderB padding16view classflex1 w-flex rowtext classfs24 c-blue fwBold marginR10 flex-none {{scope.index 10 ?0(scope.index1):scope.index1}} /texttext classflex1 text-overflow c-text fs16{{scope.row.title}}/text/viewtext classmarginLR10 flex-none{{scope.row.time}}/text/view/templatetemplate slotweight slot-scopescopespan{{scope.row.weight}}{{scope.row.unit}}/span/templatetemplate slotstatus slot-scopescopeview classw-flex row row-between paddingLR30 paddingTB10u-tag text待入库 modeplain/view v-ifscope.row.status 0 class stylecolor:#FF7D00u-icon nameclock/u-icontext classmarginL10未上报/text/viewview v-else class stylecolor:#00B42Au-icon namecheckbox-mark/u-icontext classmarginL10已上报/text/view/view/template!-- 二维码 --template slotqrcode slot-scopescopeview classw-flex img classwidth160 height160 src/static/img/qrcode.png alt/view/template/w-tablew-table组件源码
templateview classwidth w-tableviewv-iftableData.length 0classw-flex col item-list marginB20 marginLR20 radius8 relativev-for(item, index) in tableData:keyindexslot nameheader :rowitem :indexindex/slotview classwidth w-flex col paddingT15!-- u-read-more classwidth :toggletrue closeText更多 :showHeightshowHeight color#4E5969 --u-cell-grouptemplate v-for(cellItem,i) in propListtemplate v-if!cellItem.formatItem!-- 默认展示 show为true时 或者 不需要折叠时执行展示列 --view classdefault-show v-ifcellItem.show || !toggleu-cell-item :titlecellItem.label :keyi :arrowfalseslot v-iftypeof cellItem.formatValue boolean ? cellItem.formatValue : false:rowitem :namecellItem.prop :indexindex/slottext v-else{{$util.formatTextEmpty(item[cellItem.prop])}}/text/u-cell-item/view!-- 默认不展示 --view classdefault-notshow v-if!cellItem.show item.isShowu-cell-item :titlecellItem.label :keyi :arrowfalseslot v-iftypeof cellItem.formatValue boolean ? cellItem.formatValue : false:rowitem :namecellItem.prop :indexindex/slottext v-else{{$util.formatTextEmpty(item[cellItem.prop])}}/text/u-cell-item/view/templatetemplate v-ifcellItem.formatItem!-- 整体插槽列默认展示 --slot v-ifcellItem.show :namecellItem.prop :rowitem :indexindex/slot!-- 整体插槽列默认不展示 并且 列表展开时展示 --slot v-if!cellItem.show item.isShow :namecellItem.prop :rowitem :indexindex/slot/template/templateview v-showtoggle classwidth padding20 textCenterspan v-show!item.isShow clicktoggleCell(index,true)更多u-icon namearrow-down classmarginL5/u-icon/spanspan v-showitem.isShow clicktoggleCell(index,false)收起u-icon namearrow-up classmarginL5/u-icon/span/view/u-cell-group!-- /u-read-more --/view/view/view
/templatescriptexport default{props:{tableData:{default:[],type:Array,},propList:{default:[],type:Array,},showHeight:{default:500,type:Number,},toggle:{default:true,type:Boolean,}},data(){return{}},mounted(){if(this.toggle){// 可以展开收起时给表格默认增加isShow属性this.tableData.forEach(item{this.$set(item,isShow,!this.toggle)})}else{// 不需要收缩功能时每一列数据默认是true即展示// 也就是toggle为false时propList设置show属性无效均为truethis.propList.forEach(item{this.$set(item,show,!this.toggle)})}},methods:{toggleCell(i,value){this.$set(this.tableData[i],isShow,value)}}}
/scriptstyle langscss scoped::v-deep.u-cell{align-items: flex-start;}::v-deep.u-cell-box{text-indent: initial;}::v-deep.w-table .u-content__showmore-wrap{background-image:none !important;}::v-deep.w-table .u-cell_title{width: 90px !important;flex: none;font-size: 13px !important;}::v-deep.w-table .u-cell__value{text-align: left !important;overflow-wrap: break-word;}
/style
