ul 生成table 样式 表格

<div v-if="activeName === 'caseXyfxx' && casepersonArr.length" :class="casepersonArr.length%2===0 ? 'num-odd':'num-even'" class="box-table">
                <div
                  v-for="(item, key) in casepersonArr"
                  :key="key"
                  class="boxul"
                >
                  <span class="p1">  {{ item.title }}：</span>
                  <span class="p2">{{
                    item.key !== "null" ? item.key : "无"
                  }}</span>
                </div>
              </div>
              <div
                v-if="activeName === 'caseXyfxx' && !casepersonArr.length"
              >
                暂无数据
              </div>

.box-table{
    width: 100%;
    .box-content{
      text-align: left;
    }
    .boxul{
      display: inline-block;
      border-top: 1px solid #dcdfe6;
      border-left: 1px solid #dcdfe6;
      width:calc(100% /2) ;
      text-align: left;
      //padding: 0 15px;
      .p1{
        width: 160px;
        display: inline-block;
        line-height: 2;
        padding-left: 10px;
        border-right: 1px solid #dcdfe6;
        background-color: #eff1f5;;
      }
      .p2{
        padding-left: 10px;
        line-height: 2;
      }
    }
    &.num-even {
      .boxul{
        &:nth-last-child(-n+2){
          border-bottom: 1px solid #dcdfe6;
        }
        &:nth-last-child(-n+1){
           border-right: 1px solid #dcdfe6;
        }
        &:nth-child(2n){
          border-right: 1px solid #dcdfe6;
        }
      }
    }
    &.num-odd{
      .boxul{
        &:nth-last-child(-n+2){
          border-bottom: 1px solid #dcdfe6;
        }
        &:nth-child(2n){
          border-right: 1px solid #dcdfe6;
        }
      }
    }
  }