vue elementUI實現雙(多)列表格,內容均自定義
阿新 • • 發佈:2021-02-08
技術標籤:#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