Ant Design 中将列表数据转换为带边框的表格

将 Ant Design 中的 a-row 和 a-col 元素用于布局，使用 a-form-model-item 和 a-list 来显示数据，然后将这些数据转换为简单的 HTML 表格。

例如，以下代码展示如何将 a-list 中的数据转换为带边框的表格：

<a-row>
  <a-col :span="6">
    <a-form-model-item :labelCol="{span: 6}" :wrapperCol="wrapperCol1" label="工号" prop="workId">
      <a-list >
        <a-list-item>{{ mdl.workId }}</a-list-item>
      </a-list>
    </a-form-model-item>
  </a-col>
  <a-col :span="6">
    <a-form-model-item :labelCol="{span: 6}" :wrapperCol="wrapperCol1" label="姓名" prop="name">
      <a-list >
        <a-list-item>{{ mdl.name }}</a-list-item>
      </a-list>
    </a-form-model-item>
  </a-col>
  <a-col :span="6">
    <a-form-model-item :labelCol="{span: 6}" :wrapperCol="wrapperCol1" label="工号" prop="workId">
      <a-list >
        <a-list-item>{{ mdl.workId }}</a-list-item>
      </a-list>
    </a-form-model-item>
  </a-col>
  <a-col :span="6">
    <a-form-model-item :labelCol="{span: 6}" :wrapperCol="wrapperCol1" label="姓名" prop="name">
      <a-list >
        <a-list-item>{{ mdl.name }}</a-list-item>
      </a-list>
    </a-form-model-item>
  </a-col>
</a-row>

可以将 a-list 中的数据提取出来，然后使用 HTML 表格标签 <table>、<tr> 和 <td> 来构建表格。

注意：

• mdl 是一个包含数据的对象，其中的 workId 和 name 属性分别对应表格中的工号和姓名。
• wrapperCol1 是一个对象，用于设置表格列的宽度。

通过上述方法，可以轻松地将 Ant Design 中的列表数据转换为带边框的表格，提高数据展示的清晰度和易读性。