vue中使用CSS绘制表格(开发小记)

效果图：

 

html代码 

 <div class="basic-information">
          <el-row>
            <el-col :span="8">
              <el-form-item prop="mortType" label="抵质押类型">
                {{form.mortTypeStr}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="claimName" label="抵押物名称">
                {{form.claimName}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <span slot="label">抵押人</span>
                {{form.owner}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="地址" required>
              {{form.cityStr}}
              {{form.address}}&nbsp&nbsp&nbsp&nbsp
              <el-button type="text" @click="openMapDialog">地图>></el-button>
            </el-form-item>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item prop="assetType" label="资产类型">
                {{form.assetTypeStr}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item>
                <span slot="label">抵押顺位</span>
                {{form.seqMortStr}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="前序抵押金额(元)">
                <el-col :span="19">
                  {{form.orderMort}}
                  <span class="amount">{{form.orderMort|smallToBIG}}</span>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item>
                <span slot="label">查封顺位</span>
                {{form.sequenceSeiStr}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="最高额抵押金额(元)">
                <el-col :span="19">
                  {{form.maxMort}}
                  <span class="amount">{{form.maxMort|smallToBIG}}</span>
                </el-col>
              </el-form-item>

            </el-col>

          </el-row>
        </div>

 CSS代码

.basic-information {
    ::v-deep .el-form-item__label {
      height: 100%;
      font-size: 13px;
      background-color: #f5f7fa;
      border-right: #e5e9f2 1px solid;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    ::v-deep .el-form-item__content {
      /*background-color: #e5e9f2;*/
      display: flex !important;
      align-items: center !important;
      margin-top: calc(0.8vh);
      padding-left: 1rem;
    }

    ::v-deep .el-form-item--mini.el-form-item {
      height: 40px;
      border-bottom: #e5e9f2 1px solid;
      border-top: #e5e9f2 1px solid;
      border-right: #e5e9f2 1px solid;
      border-left: #e5e9f2 1px solid;
      margin-bottom: 0;

    }
}