移动端自定义表格组件和插槽的使用

表格组件的编写

<template>
  <div>
    <van-row class="van-row-box">
      <div class="column-box">
        <!-- <van-col v-if="showOperate" class="van-col-top-box" span="4">操作
        </van-col>
        <van-col v-if="showIndex" class="van-col-box van-col-top-box" span="4">序号
        </van-col> -->
        <van-col v-for="(item, index) in column" :key="index" class="van-col-box van-col-top-box" :span="item.span">
          {{ item.label }}
        </van-col>
      </div>
    </van-row>

    <template v-if="tableData.length > 0">
      <van-row class="van-row-box" v-for="(itemData, indexData) in tableData" :key="indexData">
        <div class="column-box">
          <van-col class="van-col-box" v-for="(item, index) in column" :key="index" :span="item.span">
            <!-- <van-col span="4" v-if="showOperate">
          </van-col>
          <van-col v-if="showIndex" class="van-col-box" span="4">{{ index + 1 }}
          </van-col> -->
            <div :span="item.span" v-if="item.slot">
              <slot :name="item.value" :column="item" :row="itemData" :index="index" :cell="itemData[item.value]">
              </slot>
            </div>
            <div :span="item.span" v-else>
              {{ itemData[item.value] }}
            </div>
          </van-col>
        </div>
      </van-row>
    </template>
    <template v-else>
      <van-row class="van-row-box">
        <van-col style="text-align: center;" class="van-col-box" span="24">暂无数据
        </van-col>
      </van-row>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    column: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    showIndex: {
      type: Boolean,
      default: () => false
    },
    showOperate: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.van-row-box {
  border: 1px solid #E9E9E9;
  border-bottom: none;

  .van-col-box {
    padding: 6px 8px;
    min-height: 36px;
    border-bottom: 0px;
    // font-weight: 600;
    border-right: 1px solid #E9E9E9;
  }

  .van-col-box:last-child {
    border-right: 0px;
  }

  .van-col-top-box {
    border-right: 1px solid #E9E9E9;
  }

  .van-col-top-box:last-child {
    border-right: 0px;
  }
}

.van-row-box:last-child {
  border-bottom: 1px solid #E9E9E9;
}

.van-table-bottom {
  border: 1px solid #E9E9E9;
  border-bottom: none;

  .van-col-box {
    padding: 6px 8px;
    min-height: 36px;
  }

  .van-col-border {
    border-right: 1px solid #E9E9E9;
    border-bottom: 0px;
    font-weight: 600;
  }
}

.column-box {
  display: flex;
}
</style>

表格的功能后续再添加

文件中使用表格组件

<vueTable :column="budgetColumn" :tableData="detailsData[item.value]">
                <template v-slot:deptId="{ row, index }">{{ showDept(row.deptId) }}</template>
                <template v-slot:budgetProjectId="{ row, index  }">{{ showTitle(row) || '-' }}</template>
              </vueTable>

表格字段信息

budgetColumn: [
        {
          label: '预算部门',
          value: 'deptId',
          span: '10',
          slot: true
        },
        {
          label: '预算项目',
          value: 'budgetProjectId',
          span: '14',
          slot: true
        }
      ],