vueelementUI实现双（多）列表格，内容均⾃定义
需求类似这样的：
使⽤普通table实现，样式需要⾃⼰设置：
<table class="person-info" border="1" cellspacing="0">
<tbody>
<tr>
<th>档案编号</th>
<td>{{ personInfo.name }}</td>
<th>姓名</th>
<td>{{ personInfo.x }}</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="fal" 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>{{w.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>{{w.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:'110101************'
}]
},
标题列设置背景颜⾊：
/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);
}
参考⽂章：
优化⽅式：因为⿏标滑过的样式变化，使⽤form表单实现html部分
<el-form class="person-info">
<el-row>
<el-col :span="12">
<el-form-item prop="姓名" label-width="300px">
<div slot="label" class="label">姓名</div>
<el-input v-model="personInfo.name" disabled>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="档案编号" label-width="300px">
<div slot="label" class="label">档案编号</div>
<el-input v-model="" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="性别" label-width="300px">
<div slot="label" class="label">性别</div>
<el-input v-model="personInfo.x" disabled>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="出⽣年⽉" label-width="300px">
<div slot="label" class="label">出⽣年⽉</div>
<el-input v-model="personInfo.birthday" disabled>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="民族" label-width="300px">
<div slot="label" class="label">民族</div>
<el-input v-model="personInfo.nation" disabled>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="籍贯" label-width="300px">
<div slot="label" class="label">籍贯</div>
<el-input v-model="personInfo.nativePlace" disabled>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="政治⾯貌" label-width="300px">
糖果城
<div slot="label" class="label">政治⾯貌</div>
<el-input v-model="personInfo.politicsStatus" disabled>
</el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="证件号码" label-width="300px">
<div slot="label" class="label">证件号码</div>
<el-input v-model="personInfo.idCard" disabled>
</el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
js部分清浊合流打一成语
data(){
return{
personInfo:{
no:null,
x:'',
birthday:'',
name:'',
nation:'',
politicsStatus:'',
nativePlace:'',
idCard:null,
}
}
}
分组交换css部分
.person-info{
width: 98.7%;
margin: 0.2% 0 1% 10px;
孔望山
color: #8e9fc2;
border-top: 1px solid #D1CECE;
border-left: 1px solid #D1CECE;
/deep/ .el-form-item__label{
padding: 0;
border-right: 1px solid #D1CECE;
}
/deep/ .el-col{
border-bottom: 1px solid #D1CECE;
}
.label{
padding-left: 20px;
text-align: left;
痰多吃什么好background-color: #FAFAFA;
}
/deep/ .el-input{
border-top: 0;
border-right: 1px solid #D1CECE;
}
/deep/ .el-input.is-disabled .el-input__inner{ cursor: default !important;
}
/deep/ .el-input__inner{
border: none;
border-radius: 0;
border-top: 0;
background-color: #fff;
color: #606266;
}
}
效果如图：
如果⼤家想⼀起交流学习，共同进步，欢迎搜索公众号“是⽇前端”，点击交流群按钮进交流群，群⾥
李雪宁仅限技术交流、⾯试交流等，需要什么资料可以群⾥说，交流群的特⾊我还在考虑中，再次感谢⼤家的⽀持~
