在vue环境下，如何将两个表格内的元素对齐？

  • Z时代
  • 2024-03-02
  • 分类：IT

问题

如下所示，如何将框1和框2的元素对齐
在vue环境下，如何将两个表格内的元素对齐？

具体环境和代码

我是使用ant-design-vue组件, 具体代码如下

html部分：

 <a-row class="section" v-if="resolvePurchasePlanList && resolvePurchasePlanList.length > 0">
            <div class="detail-item-wrapper" :key="detail.id" v-for="(detail, index) in resolvePurchasePlanList">
              <div class="detail-item-left" v-if="!isDetails">
                <a-checkbox :checked="isSelectedPchPlanIds(selectedDetailsPchPlanIds, detail)"
                            @click="() => changeSelectedDetailPurchaseIds(selectedDetailsPchPlanIds, detail)"
                ></a-checkbox>
              </div>
              <table class="my-table">
                <tr>
                  <td class="label"><span class="danger-label" v-show="!isDetails">*</span>所属项目</td>
                  <td colspan="3">
                      <span v-if="isDetails">
                        {{ detail.projectName }}
                      </span>
                    <a-input :value="detail.projectName" :read-only="true" v-else
                             :class="{ danger: detail.checkSigns.projectName }"/>
                  </td>
                  <td class="label"><span class="danger-label">*</span>采购金额</td>
                  <td colspan="3" style="text-align: right ">
                    {{ formatMoney(detail.purchaseMoneySum) }}
                  </td>
                </tr>
                <tr>
                  <td class="label"><span class="danger-label" v-show="!isDetails">*</span>采购内容</td>
                  <td class="label"><span class="danger-label" v-show="!isDetails">*</span>数量</td>
                  <td class="label"><span class="danger-label" v-show="!isDetails">*</span>金额</td>
                  <td class="label">品牌</td>
                  <td class="label">规格型号</td>
                  <td class="label">计量单位</td>
                  <td class="label">单价</td>
                </tr>

css部分：

.my-table {
  flex: 1;
  width: 100%;
  border-collapse: collapse;
}
  .label{
    padding: 10px 15px;
    height: 40px;
    line-height: 40px;
    border: #cccccc solid 1px;
    border-radius: 5px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
  }

回答：

使用colgroup指定一下每列的宽度，示例如下：

<table>
  <colgroup>
    <col style="width: 200px" />
    <col style="width: 100px" />
    <col style="width: 100px" />
    <col style="width: 100px" />
    <col style="width: 200px" />
    <col style="width: 100px" />
    <col style="width: 100px" />
  </colgroup>
  <!-- 或者使用span属性简写 -->
  <colgroup>
    <col span="1" style="width: 200px" />
    <col span="3" style="width: 100px" />
    <col span="1" style="width: 200px" />
    <col span="2" style="width: 100px" />
  </colgroup>
  <tr>
    <td>所属项目</td>
    <td colspan="3"></td>
    <td>采购金额</td>
    <td colspan="3"></td>
  </tr>
  <tr>
    <td>采购内容</td>
    <td>数量</td>
    <td>金额</td>
    <td>品牌</td>
    <td>规格型号</td>
    <td>计量单位</td>
    <td>单价</td>
  </tr>
</table>

回答：

？为啥不直接用框架完整的 Table 组件
？原生的费事费力，还得一行行写数据绑定
我记得跨行也有相应的配置

表格行/列合并
https://2x.antdv.com/components/table-cn/#Column

以上是 在vue环境下，如何将两个表格内的元素对齐？ 的全部内容， 来源链接： utcz.com/p/934949.html

回到顶部