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}}</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>