根据上面给出的代码要求列名在同一行显示下面跟着对应的数据

为了实现表格在界面上将列名与数据在同一行进行展示，可以参考如下简化后的示例代码：

### 模板部分 (template)

<template>
  <div>
    <!-- 其他界面元素 -->
    
    <div class="data-display">
      <div class="data-row">
        <label>表号：</label>{{ userData.version ? userData.version : '-' }}
      </div>
      <div class="data-row">
        <label>表具余额：</label>{{ userData.version ? userData.version : '-' }} 元
      </div>
      <div class="data-row">
        <label>当前价格：</label>{{ userData.priceName ? userData.priceName : '-' }} 元
      </div>
      <div class="data-row">
        <label>当前版本：</label>{{ userData.version ? userData.version : '-' }}
      </div>
      <div class="data-row">
        <label>当前阶梯：</label>{{ userData.ladderNum ? userData.ladderNum : '-' }}
      </div>
    </div>

    <!-- 其他界面元素 -->
  </div>
</template>

### 样式部分 (style)

<style lang="less" scoped>
.data-display {
  display: flex;
  flex-direction: column;
  margin-top: 20px;

  .data-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    label {
      margin-right: 10px;
      font-weight: bold;
    }
  }
}
</style>

### 解释
1. **模板部分**:
- 使用 `div` 容器来包裹每一对列名和数据。
- 利用 `label` 来表示列名，使用双大括号插值语法来动态绑定数据。

2. **样式部分**:
- `data-display` 类用于包含所有的数据行，设置为垂直排列（`flex-direction: column`）。
- 每个 `data-row` 包含一个 `label` 和一个数据字段，两者通过 `display: flex` 水平对齐，并且中间留有一定间距（`margin-right: 10px`）。

这样，界面上的列名和对应的数据显示在同一行，并且每一对列名和数据之间有足够的间距，便于阅读和理解。