【Arco】表格自定义信息布局

最新推荐文章于 2025-02-28 13:51:39 发布

淡忘_cx

最新推荐文章于 2025-02-28 13:51:39 发布

阅读量2k

点赞数 8

文章标签： vue3 arco design

本文链接：https://blog.csdn.net/weixin_44646977/article/details/135554414

版权

该篇文章介绍了如何在Vue项目中使用表格组件动态展示订单数据，包括商品信息、价格、总价格、买家、收货信息以及订单状态，展示了如何通过数据绑定和循环渲染实现表格内容的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果
在这里插入图片描述

<template>

      <!-- 表格 -->
      <a-table :data="data" style="margin-top: 30px" :bordered="false">
        <template #columns>
          <a-table-column
            title="商品信息"
            :header-cell-style="{ paddingLeft: '30px' }"
            width="276"
            data-index="salary"
          >
            <template #cell="{ record }">
              <a-row class="grid-demo">
                <a-col :span="24">
                  <div class="b_t_s_d">
                    <div class="b_t_s_d_text"> 订单编号：20240110123456 </div>
                    <img
                      src="@/assets/images/copy.png"
                      style="width: 22px; height: 22px; cursor: pointer"
                    />
                  </div>
                  <div
                    v-for="(item, index) in record.kk"
                    :key="index"
                    class="b_t_s_d_s"
                  >
                    1
                  </div>
                </a-col>
              </a-row>
            </template>
          </a-table-column>
          <a-table-column title="价格" width="220" align="center">
            <template #cell="{ record }">
              <a-row class="grid-demo">
                <a-col :span="24">
                  <div class="b_t_s_d">
                    <div class="b_t_s_d_text"> 下单时间：2024/01/10 15:50 </div>
                  </div>
                  <div
                    v-for="(item, index) in record.kk"
                    :key="index"
                    class="b_t_s_d_s"
                  >
                    1
                  </div>
                </a-col>
              </a-row>
            </template>
          </a-table-column>
          <a-table-column title="总价格" width="231" align="center">
            <template #cell="{ record }">
              <a-row class="grid-demo">
                <a-col :span="24">
                  <div class="b_t_s_d">
                    <div class="b_t_s_d_text"> 支付时间：2024/01/10 15:56 </div>
                  </div>
                  <div
                    class="b_t_s_d_s"
                    :style="{ height: record.kk.length * 114 + 'px' }"
                  >
                    {{ record.kk.length }}
                  </div>
                </a-col>
              </a-row>
            </template>
          </a-table-column>
          <a-table-column title="买家" width="246" align="center">
            <template #cell="{ record }">
              <a-row class="grid-demo">
                <a-col :span="24">
                  <div class="b_t_s_d">
                    <div class="b_t_s_d_text"> 通路：电视购物 </div>
                  </div>
                  <div
                    class="b_t_s_d_s"
                    :style="{ height: record.kk.length * 114 + 'px' }"
                  >
                    {{ record.kk.length }}
                  </div>
                </a-col>
              </a-row>
            </template>
          </a-table-column>
          <a-table-column title="收货信息" align="center">
            <template #cell="{ record }">
              <a-row class="grid-demo">
                <a-col :span="24">
                  <div class="b_t_s_d"></div>
                  <div
                    class="b_t_s_d_s"
                    :style="{ height: record.kk.length * 114 + 'px' }"
                  >
                    {{ record.kk.length }}
                  </div>
                </a-col>
              </a-row>
            </template>
          </a-table-column>
          <a-table-column title="订单状态" align="center">
            <template #cell="{ record }">
              <a-row class="grid-demo">
                <a-col :span="24">
                  <div class="b_t_s_d"></div>
                  <div
                    class="b_t_s_d_s"
                    :style="{ height: record.kk.length * 114 + 'px' }"
                  >
                    {{ record.kk.length }}
                  </div>
                </a-col>
              </a-row>
            </template>
          </a-table-column>
        </template>
      </a-table>
</template>

<script lang="ts" setup>
  
  const data = ref([
    {
      id: 1,
      name: '1',
      kk: [
        { id: 1, name: '1-1' },
        { id: 2, name: '1-2' },
      ],
    },
  ]);

</script>

<style scoped lang="less">
  
  .b_t_s_d {
    width: 100%;
    height: 50px;
    background: #f3f8ff;
    color: rgb(78, 89, 105);
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 500;
    line-height: -1px;
    letter-spacing: 0px;
    text-align: left;
    // 垂直居中
    display: flex;
    align-items: center;
    // 水平居中
    // justify-content: center;
    .b_t_s_d_text {
      margin-left: 30px;
    }
  }
  .b_t_s_d_s {
    width: 100%;
    height: 114px;
    border-right: 1px solid rgb(240, 240, 240);
    border-bottom: 1px solid rgb(240, 240, 240);
  }
  .y3-content-table :deep .arco-table-cell {
    padding: 10px 0px;
  }
</style>