如何用el-col 和 el-row 实现页面显示这个表格

要使用`el-row`和`el-col`组件来布局并展示一个类似上述表格的信息，你可以按照Element UI框架的设计思路来进行开发。下面给出一个基本的例子代码片段：

首先需要引入Element UI库，并且初始化项目环境以便可以正常使用它的组件。

HTML/JS模板中，创建一个表格结构如下：

<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">企业名称</el-col>
      <el-col :span="6">合约编号</el-col>
      <!-- 其它列 -->
      <el-col :span="6">签约账号</el-col>
      <el-col :span="6">合约用途</el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="6">具体值A</el-col>
      <el-col :span="6">具体值B</el-col>
      <!-- 其它行数据 -->
      <el-col :span="6">具体值C</el-col>
      <el-col :span="6">具体值D</el-col>
    </el-row>
    
    <!-- 根据实际表格内容重复上面的el-row定义 -->

    <!-- 表格底部可能有的操作栏或者注释 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        填写要求：...
      </el-col>
      <el-col :span="12">
        银行签章受理人受理日期
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'YourComponentName'
}
</script>

<style scoped>
/* 添加必要的样式 */
</style>

在这个例子中，每一行(`el-row`)被分割成多个等宽的部分(`el-col`)，每个部分占据一定的栅格单位(span)。通过调整这些属性，可以根据具体的表格需求自定义布局效果。

注意这只是一个基础示例，在实际应用时你需要根据提供的PDF中的具体内容来填充相应的数据以及调整布局以匹配设计稿或需求。如果表格的数据是动态生成的，则需要结合Vue.js的数据绑定功能与v-for循环来实现。