使用element-plus的el-descriptions组件出现多个组件对不齐,长英文和长数字不能换行显示

17 阅读2分钟

针对使用el-descriptions出现换行居中,长英文不换行,多descriptions组件不对齐问题给出解决方式 image.png

    <el-descriptions title="User Info">
      <el-descriptions-item v-for="info in testList1" :label="info.label">{{
        info.value
      }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="User Info(和上面不对齐)">
      <el-descriptions-item v-for="info in testList2" :label="info.label">{{
        info.value
      }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="User Info(中文换行出现和label对齐以及长数字、长英文不能换行)">
      <el-descriptions-item width="33.33%" v-for="info in testList3" :label="info.label">{{
        info.value
      }}</el-descriptions-item>
    </el-descriptions>
    <h1>对比后</h1>
    <div class="custom">
      <el-descriptions title="User Info">
        <el-descriptions-item
          width="33.33%"
          label-class-name="custom-label"
          v-for="info in testList1"
          :label="info.label"
          >{{ info.value }}</el-descriptions-item
        >
      </el-descriptions>
      <el-descriptions title="User Inf">
        <el-descriptions-item
          width="33.33%"
          label-class-name="custom-label"
          v-for="info in testList2"
          :label="info.label"
          >{{ info.value }}</el-descriptions-item
        >
      </el-descriptions>
      <el-descriptions title="User Info">
        <el-descriptions-item
          width="33.33%"
          label-class-name="custom-label"
          v-for="info in testList3"
          :label="info.label"
          >{{ info.value }}</el-descriptions-item
        >
      </el-descriptions>
    </div>
const testList1 = ref([
  {
    label: "用户名",
    value: "kooriookami",
  },
  {
    label: "性别",
    value: "未知",
  },
  {
    label: "电话",
    value: "18100000000",
  },
  {
    label: "地区",
    value: "Suzhou",
  },
  {
    label: "地址",
    value: "No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province",
  },
]);
const testList2 = ref([
  {
    label: "用户名",
    value: "kooriookami",
  },
  {
    label: "性别",
    value: "未知未知未知未知未知未知未知未知",
  },
  {
    label: "电话",
    value: "18100000000",
  },
  {
    label: "地区",
    value: "Suzhou",
  },
  {
    label: "地址",
    value: "No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province",
  },
]);
const testList3 = ref([
  {
    label: "用户名",
    value: "kooriookami",
  },
  {
    label: "性别",
    value: "未知未知未知未知未知未知未知未知",
  },
  {
    label: "电话",
    value:
      "18100000000181000000001810000000018100000000181000000001810000000018100000000181000000001810000000018100000000181000000001810000000018100000000",
  },
  {
    label: "地区",
    value:
      "地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区地区",
  },
  {
    label: "地址",
    value:
      "地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址地址",
  },
]);
.custom {
  ::v-deep .el-descriptions__cell {
    display: inline-flex;
  }
  ::v-deep .custom-label {
    word-break: keep-all !important;
  }
  ::v-deep .el-descriptions__content {
    word-break: break-all;
  }
  ::v-deep tr {
    display: flex;
  }
}