vue elementUI实现双（多）列表格，内容均自定义

需求类似这样的：

使用普通table实现，样式需要自己设置：

<table class="person-info" border="1" cellspacing="0">
      <tbody>
      <tr>
        <th>档案编号</th>
        <td>{
  
  { personInfo.name }}</td>
        <th>姓名</th>
        <td>{
  
  { personInfo.sex }}</td>
      </tr>
      <tr>
        <th>性别</th>
        <td>{
  
  { personInfo.birthday }}</td>
        <th>出生年月</th>
        <td>{
  
  { personInfo.nation }}</td>
      </tr>
      <tr>
        <th>民族</th>
        <td>{
  
  { personInfo.nation }}</td>
        <th>籍贯</th>
        <td>{
  
  { personInfo.nativePlace }}</td>
      </tr>
      <tr>
        <th>证件号码</th>
        <td colspan='3'>{
  
  { personInfo.idCard }}</td>
      </tr>

      </tbody>
    </table>

使用elementUI实现：

思路：使用具名插槽和作用域插槽slot=“header”和slot-scope=“scope”，同时利用show-header属性隐藏表头实现

<div class="table-title">人员基本信息</div>
<el-table :data="tableData" border :show-header="false" class="person-info" >
  <el-table-column prop="name1"