uni-app封装table使用
<template><div class="dinner-table"><div class="dinner-table-header"><div class="dinner-table-header-item" v-for="(v,i) in columns" :key="i" :style="[headerStyle(v)]">{{v.name}
·
<template>
<div class="dinner-table">
<div class="dinner-table-header">
<div class="dinner-table-header-item" v-for="(v,i) in columns" :key="i" :style="[headerStyle(v)]">{{v.name}}</div>
</div>
<scroll-view :scroll-y="true" class="dinner-table-body">
<div class="dinner-table-body-section" v-for="(v,i) in data" :key="i">
<div class="dinner-table-body-section-item" :style="[headerStyle(v,ind),bodyStyle(v,i)]" v-for="(val,ind) in columns" :key="`a${ind}`">
<div class="section-item-default" v-if="val.slot === 'index'">
{{i + 1}}
</div>
<slot :name="val.slot" v-if="val.slot" :row="v" :index="i"></slot>
<div v-else class="ellipsis-2" style="text-align: center">{{v[val.key]}}</div>
</div>
</div>
<div class="dinner-table-body-none" v-if="!data.length">
<u-empty mode="list"></u-empty>
</div>
<div class="dinner-table-body-loading" v-if="loading">
<u-loading-icon size="40" mode="circle" text="加载中" :vertical="true"></u-loading-icon>
</div>
</scroll-view>
</div>
</template>
<script>
export default {
name: "",
props: {
loading: {
type: Boolean,
default: false,
},
columns: {
type: Array,
default: () => {
return [
{name: '序号',key: 'name', slot: 'index', width: 39},
{name: '食谱', key: 'name'},
{name: '食堂', key: 'diningName', width: 91},
{name: '档口', key: 'stallName', width: 61},
{name: '开始时间', key: 'beginTime', slot: 'beginTime', width: 112},
{name: '结束时间', key: 'endTime', slot: 'endTime', width: 112},
{name: '创建时间', key: 'gmtCreate', slot: 'gmtCreate', width: 112},
{name: '操作', key: 'operation', slot: 'operation', width: 41}
]
}
},
data: {
type: Array,
default: () => {
return []
}
}
},
methods: {
headerStyle(v,i){
let style = {};
if (i != undefined) {
v = this.columns[i]
}
if (v.width) {
style.width = `${v.width}rpx`;
style.flex = 'unset';
}
return style;
},
bodyStyle(v,i) {
let style = {};
if (i % 2) {
style.background = '#F3F7FF'
} else style.background = 'white'
return style;
},
onEdit(val){
this.$emit('onEdit',val);
},
onDelete(val){
this.$emit('onDelete',val);
},
}
}
</script>
<style scoped lang="scss">
.dinner-table{
display: flex;
flex-direction: column;
&-header{
width: 100%;
display: flex;
align-items: center;
background: #2E9FFF;
height: 34rpx;
&-item{
display: flex;
align-items: center;
justify-content: center;
flex: 1;
font-size: 15rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
}
}
&-body{
height: calc(100vh - (160rpx + var(--status-bar-height)));
overflow: scroll;
width: 100%;
display: flex;
flex-direction: column;
&-section{
display: flex;
align-items: center;
min-height: 34rpx;
&-item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
min-height: 34rpx;
font-size: 10rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
border-bottom: 1rpx solid #E1E1E1;
border-right: 1rpx solid #E1E1E1;
color: #323232;
.section-item-default{
display: flex;
justify-content: center;
align-items: center;
font-size: 10rpx;
}
}
}
&-none{
background: white;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding-top: 10rpx;
padding-bottom: 15rpx;
height: 100%;
}
&-loading{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255,255,255,.7);
}
}
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)