设置vl-dialog中组件的位置

Question

怎么把分类1、分类2、分类3放在一行，排查内容单独一行？

vue代码：

    <el-dialog :visible.sync="detailInfo.open" width="65%" append-to-body :title="detailInfo.title"
               :close-on-click-modal="false" center class="DialogStyle DialogInputStyle">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template #title>
            <img src="@/assets/images/by.png" alt="" style="margin-left: -25px;height: 18px;padding-right: 25px">基本信息
          </template>
          <el-row :gutter="40" class="dialogrow">
            <el-descriptions  v-if="detail != null" class="margin-top" :column="2"  border>
              <el-descriptions-item label="管控方式" label-class-name="desc" >
                <dict-tag :options="dict.type.prevention_risk_data_src" :value="detail.dataSrc"/>
              </el-descriptions-item>
              <el-descriptions-item label="管控措施描述" label-class-name="desc">
                {{ detail.riskMeasureDesc }}
              </el-descriptions-item>
              <el-descriptions-item label="管控措施分类1" label-class-name="desc" >
                {{ detail.classify1 }}
              </el-descriptions-item>
              <el-descriptions-item label="管控措施分类2" label-class-name="desc">
                {{ detail.classify2 }}
              </el-descriptions-item>
              <el-descriptions-item label="管控措施分类3" label-class-name="desc">
                {{ detail.classify3 }}
              </el-descriptions-item>
              <el-descriptions-item label="隐患排查内容" label-class-name="desc">
                {{ detail.troubleshootContent }}
              </el-descriptions-item>
            </el-descriptions>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDetail">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

Answer 1

这样试试

 <el-dialog :visible.sync="detailInfo.open" width="65%" append-to-body :title="detailInfo.title"
               :close-on-click-modal="false" center class="DialogStyle DialogInputStyle">
      <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
          <template #title>
            <img src="@/assets/images/by.png" alt="" style="margin-left: -25px;height: 18px;padding-right: 25px">基本信息
          </template>
          <el-row :gutter="40" class="dialogrow">
            <el-descriptions  v-if="detail != null" class="margin-top" :column="3"  border>
              <el-descriptions-item label="管控方式"  label-class-name="desc" >
                <dict-tag :options="dict.type.prevention_risk_data_src" :value="detail.dataSrc"/>
              </el-descriptions-item>
              <el-descriptions-item label="管控措施描述" :span='2' label-class-name="desc">
                {{ detail.riskMeasureDesc }}
              </el-descriptions-item>
              <el-descriptions-item label="管控措施分类1"  label-class-name="desc" >
                {{ detail.classify1 }}
              </el-descriptions-item>
              <el-descriptions-item label="管控措施分类2" label-class-name="desc">
                {{ detail.classify2 }}
              </el-descriptions-item>
              <el-descriptions-item label="管控措施分类3" label-class-name="desc">
                {{ detail.classify3 }}
              </el-descriptions-item>
              <el-descriptions-item label="隐患排查内容" :span='3' label-class-name="desc">
                {{ detail.troubleshootContent }}
              </el-descriptions-item>
            </el-descriptions>
          </el-row>
        </el-collapse-item>
      </el-collapse>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDetail">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>