技術標籤：#Vue#專案應用中總結前端csshtml前端vue.jselementui

需求類似這樣的：

使用普通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" label="檔案編號"></el-table-column>
  <el-table-column>
    <template slot="header" slot-scope="scope">
      <span></span>
    </template>
    <template slot-scope="scope">
      <span>{{scope.row.value1}}</span>
    </template>
  </el-table-column>
  <el-table-column prop="name2" label="姓名"></el-table-column>
  <el-table-column>
    <template slot="header" slot-scope="scope">
      <span></span>
    </template>
    <template slot-scope="scope">
      <span>{{scope.row.value2}}</span>
    </template>
  </el-table-column>
</el-table>

mounted(){
    this.tableData = [
      {
        name1: '姓 名',
        value1: '王五',
        name2: '檔案編號',
        value2: '123',
      },{
        name1: '性 別',
        value1: '男',
        name2: '出生年月',
        value2: '1980.01.01',
      },{
        name1: '民 族',
        value1: '漢',
        name2: '籍 貫',
        value2: '四川',
      },{
        name1: '政治面貌',
        value1: '黨員',
        name2: '證件號碼',
        value2: '110101198001010013'
      }]
  },

標題列設定背景顏色：

/deep/ .person-info .el-table__body tbody tr td:nth-child(1),
/deep/ .person-info .el-table__body tbody tr td:nth-child(3){
  background-color: rgba(26, 64, 139, 0.5);
}

參考文章：https://blog.csdn.net/kkk_xxx/article/details/108263222