⼩程序table表格⾃定义组件实现
效果
1. 左图是多列并且给了最⼤⾼度的效果。
2. 右图是没有给某列固定宽度并且四列的宽度加起来不超出屏幕宽度的效果。
3. 在不为某列设置固定宽度的情况下，四列及四列以下均是平分屏幕宽度的，并且不能左右滑动。
属性
属性类型默认值必填说明
tabData Array[ ]否数据源
columns Array[ ]是数据列
setting Object{ }否⾃定义样式配置项
columns
属性类型默认值必填说明
label String是表格标题
prop Array是表格中需要展⽰的数据列
onclick Boolean false否为某⼀列设置点击事件，若同时为多列设置了点击事件，则只有第⼀个⽣效
fontSize Number24否某⼀列的字体⼤⼩，单位：rpx
属性类型默认值必填说明
fontWeight Number / String normal否某⼀列的字重（粗细），⽀持 css 的所有属性值
textDecoration String none否某⼀列的⽂本修饰，⽀持 css 的所有属性值
color String否某⼀列的字体颜⾊，⽀持⼗六进制、RGB、RGBA、英⽂单词
setting
属性类型默认值必填说明
tableOutBorder String否表格外边框，⽀持三值写法，例如：2rpx solid #ebeef5 tableInBorder String否表格内边框，⽀持三值写法，例如：2rpx solid #ebeef5 tableInBorderLevel Boolean false否表格内是否只显⽰⽔平边框
tableRadius String否表格圆⾓
theadHeight String否表格标题的⾼度
theadAlign String left否表格标题的字体对齐⽅式，值：left、center、right
theadColor String否表格标题的字体颜⾊，⽀持⼗六进制、英⽂单词
theadBgColor String否表格标题的背景颜⾊，⽀持⼗六进制、RGB、RGBA、英⽂单词theadFontSize Number24否表格标题的字体⼤⼩，单位：rpx
theadFontWeight Number / String bold否表格标题的字重（粗细），⽀持 css 的所有属性值
tbodyHeight String否表格体的⾼度, ⽤于垂直滚动
tbodyAlign String left否表格体的字体对齐⽅式，值：left、center、right
tbodyColor String否表格体的的字体颜⾊，⽀持⼗六进制、英⽂单词
tbodyBgColor String否表格体的背景颜⾊，⽀持⼗六进制、RGB、RGBA、英⽂单词tbodyFontSize Number24否表格体的字体⼤⼩，单位：rpx
tbodyFontWeight Number / String normal否表格体的字重（粗细），⽀持 css 的所有属性值
trHeight String否表格体的⾏的⾼度
stripe String否表格体的斑马纹背景⾊，⽀持⼗六进制、RGB、RGBA、英⽂单词⼦组件WXML
<wxs src="./index.wxs"module="filter"/>
<view class="container">
<view class="table"
>
<view class="thead" >
<view class="th"
for="{{column}}"
key="index"
style="flex-grow:0;flex-basis:{{headWidth=='100%'?(100/column.length)+'%':item.width+'rpx'}};color:{{
config.theadColor}};font-size:{{config.theadFo ntSize}}rpx;font-weight:{{config.theadFontWeight}};border-right:{{index==(column.length - 1)?'none':(config.tableInBorderLevel?'none':config.tableInBorder )}};border-bottom:{{config.tableInBorder}};">
<view class="txt" >{{item.label}}</view>
</view>
</view>
<scroll-view scroll-y if="{{tabData.length > 0}}" >
<view class="tr"
for="{{tabData}}"
for-item="item"
key="index"
>
<view class="td"
for="{{column}}"
for-item="col"
for-index="colIndex"
key="colIndex"
>
<view class="txt"
data-value="{{item}}"
bindtap="{{(col.οnclick==true||col.οnclick=='true')?'btnAction':''}}"
>
<block if="{{!!pe}}">{{pe](item[col.prop], col.param)}}</block>
<block else>{{item[col.prop]}}</block>
</view>
</view>
</view>
</scroll-view>
<view if="{{tabData.length === 0}}"class="msg">
<view>暂⽆数据~</view>
</view>
</view>
</view>
⼦组件JS
Component({
data:{
headWidth:null,// 设置表格的整体宽度，⽤于⽔平滚动
column:[],// 表头标题
config:{// 表格⾃定义样式设置
tableOutBorder:'',// 表格的表框
tableInBorder:'',// 表格的表框
tableInBorderLevel:false,// 表格内只显⽰⽔平边框
tableRadius:'',// 表格圆⾓
theadHeight:'',// 表头的⾼度
fontweight取值theadAlign:'',// 表头的字体对齐
theadColor:'',// 表头的字体颜⾊
theadBgColor:'',// 表头的背景⾊
theadFontSize:'',// 表头的字体⼤⼩
theadFontWeight:'',// 表头的字体粗细
tbodyHeight:'',// 表格 tbody 的⾼度, ⽤于垂直滚动
tbodyAlign:'',// 表格⾏的字体对齐⽅式
tbodyColor:'',// 表格⾏的字体颜⾊
tbodyBgColor:'',// 表格⾏的背景⾊
tbodyFontSize:'',// 表格⾏的字体⼤⼩
tbodyFontSize:'',// 表格⾏的字体⼤⼩
tbodyFontWeight:'',// 表格⾏的字体粗细
trHeight:'',// 表格⾏ tr 的⾼度
stripe:''// 表格的斑马纹背景⾊
}
},
properties:{
tabData:{// ⽗组件传⼊的表格数据
type: Array,
value:[]
},
columns:{// ⽗组件传⼊的表头标题
type: Array,
value:[]
},
setting:{// ⽗组件传⼊的表格⾃定义样式
type: Object,
value:{}
}
},
observers:{
'tabData'(val){
// console.log('tableData', val)
},
'columns'(val){
if(val.length !==0){
let width =0
let num =0
val.forEach((item)=>{
// 判断是否设置了列宽，没有的话赋值默认的宽度 186，单位rpx
if(!!item.width){
width += item.width/1
}else{
item.width =186
width = width +186
}
// 如果给多列添加了点击事件，则第⼀个绑定了点击事件的列⽣效
if(!!lick &&(lick ==true|| lick =='true')){
num++
if(num >1){
}
}
})
// 判断table的宽度是否超出屏幕的宽度，超出则赋值固定的宽度，否则赋值百分⽐if(width <750){
width ='100%'
}else{
width = width +'rpx'
}
this.setData({
column: val,
headWidth: width
})
}
},
'setting'(val){
// 判断传⼊的表格设置项是否为空
if(Object.keys(val).length !==0){
for(let key in val){
let str =null
if(key =='tableInBorderLevel'&&(val[key]==true|| val[key]=='true')){
str =true
}else if(key =='tableInBorderLevel'){
str =false
}else{
str =String(val[key]).replace(/(^\s*)|(\s*$)/g,'')
}
if(str !=''&& str !=null&& str !='null'&& str != undefined && str !='undefined'){
fig[key]= str
}
}
this.setData({
config:fig
})
}
}
},
methods:{
// 表格某⾏的点击事件
btnAction:function(e){
let value = e.currentTarget.dataset.value // value：⼀个包含点击⾏所有数据的对象
}
}
})
⼦组件WXS
内含格式化时间、价格、百分⽐的⽅法
/
/ 格式化时间
function time(val, option){
var date =getDate(val)
var year = FullYear()
var month = Month()+1
var day = Date()
var week = Day()
var hour = Hours()
var minute = Minutes()
var second = Seconds()
//获取年⽉⽇
if(option =='YY-MM-DD')return[year, month, day].map(formatNumber).join('-')
//获取年⽉
if(option =='YY-MM')return[year, month].map(formatNumber).join('-')
//获取年
if(option =='YY')return[year].map(formatNumber).toString()
//获取⽉
if(option =='MM')return[mont].map(formatNumber).toString()
//获取⽇
if(option =='DD')return[day].map(formatNumber).toString()
//获取年⽉⽇周⼀⾄周⽇
if(option =='YY-MM-DD Week')return[year, month, day].map(formatNumber).join('-')+' '+getWeek(week) //获取⽉⽇周⼀⾄周⽇
if(option =='MM-DD Week')return[month, day].map(formatNumber).join('-')+' '+getWeek(week)
//获取周⼀⾄周⽇
if(option =='Week')return getWeek(week)
//获取时分秒
if(option =='hh-mm-ss')return[hour, minute, second].map(formatNumber).join(':')
//获取时分
if(option =='hh-mm')return[hour, minute].map(formatNumber).join(':')
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论