调整Element UI Table表格的样式
最终效果: 单元格合并,样式调整
模拟后端返回数据
{
teamName: '小组一',
outsourceFlag: '是',
adminName: '张三',
testValues: [
{
code: '001',
value: '测试一'
},
{
code: '002',
value: '测试二'
},
{
code: '003',
value: '测试三'
}
],
taskTypes: [
{
code: '001',
value: '任务一'
},
{
code: '002',
value: '任务二'
},
{
code: '003',
value: '任务三'
},
],
caseTypes: [
{
code: '001',
value: '吃'
},
{
code: '002',
value: '喝'
},
{
code: '0023',
value: '玩'
},
],
},
{
teamName: '小二',
outsourceFlag: '是',
adminName: '李四',
testValues: [
{
code: '001',
value: '测试一'
},
],
taskTypes: [
{
code: '001',
value: '任务一'
},
],
caseTypes: [
{
code: '001',
value: '玩'
},
],
},
{
teamName: '小组一',
outsourceFlag: '是',
adminName: '张三',
testValues: [
{
code: '001',
value: '测试一'
},
{
code: '002',
value: '测试二'
},
{
code: '003',
value: '测试三'
}
],
taskTypes: [
{
code: '001',
value: '测试一'
},
{
code: '002',
value: '测试二'
},
{
code: '003',
value: '测试三'
}
],
caseTypes: [
{
code: '001',
value: '测试一'
},
{
code: '002',
value: '测试二'
},
{
code: '003',
value: '测试三'
}
],
},],
CSS代码
>>> .has-gutter tr>th:nth-child(2){
padding-left: 10px !important;
}
>>> .el-table--enable-row-transition .el-table__body td:nth-child(2){
padding-left: 10px !important;
}
>>> .has-gutter tr>th:nth-last-child(2){
text-align:center;
}
>>> .el-table--enable-row-transition .el-table__body td:last-child{
padding-left: 10px !important;
}
>>> .el-table--enable-row-transition .el-table__body td{
padding:0;
}
>>> .cell .el-tooltip{
padding:0 !important;
}
>>> .el-table .cell{
padding: 0 !important;
}
.annotation-rs:last-child{
border:0;
}
.annotation-rs{
margin-top: 5px;
border-bottom: 1px solid #EBEEF5;
}
全部代码实现
<template>
<div class="app-container">
<el-row>
<el-col :span="24" class="warp-table" style="margin-top:10px">
<el-table ref="multipleTable" :border="true" cellspacing="0" :data="tableData" stripe
style="width: 100%" id="deliveryTeamTable">
<el-table-column type="index" label="序号" width="60" align="center" header-align='center'>
</el-table-column>
<el-table-column prop="teamName" label="小组名称" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="outsourceFlag" label="是否启用" align="center" width="100px" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="adminName" align="center" label="小组管理员" :show-overflow-tooltip="true">
</el-table-column>
<el-table-column prop="testValues" label="权限类型" align="center" width="100px"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<div class="annotations">
<div class="annotation-rs"
v-for="(item,index) in scope.row.testValues" :key="index">
<span>{{item.value}}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="taskType" label="任务类型" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div class="annotations">
<div class="annotation-rs"
v-for="(item,index) in scope.row.taskTypes" :key="index">
<span>{{item.value}}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column align="center" prop="caseType" label="负责内容" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div class="annotations">
<div class="annotation-rs"
v-for="(item,index) in scope.row.caseTypes" :key="index">
<span>{{item.value}}</span>
</div>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="90px">
<template slot-scope="scope">
<a @click="editInfo(scope.row.id)">编辑</a>
<a @click="delInfo(scope.row.id)">删除</a>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [ {
teamName: '小组一',
outsourceFlag: '是',
adminName: '张三',
testValues: [
{
code: '001',
value: '测试一'
},
{
code: '002',
value: '测试二'
},
{
code: '003',
value: '测试三'
}
],
taskTypes: [
{
code: '001',
value: '任务一'
},
{
code: '002',
value: '任务二'
},
{
code: '003',
value: '任务三'
},
],
caseTypes: [
{
code: '001',
value: '吃'
},
{
code: '002',
value: '喝'
},
{
code: '0023',
value: '玩'
},
],
},
{
teamName: '小二',
outsourceFlag: '是',
adminName: '李四',
testValues: [
{
code: '001',
value: '测试一'
},
],
taskTypes: [
{
code: '001',
value: '任务一'
},
],
caseTypes: [
{
code: '001',
value: '玩'
},
],
},
{
teamName: '小组一',
outsourceFlag: '是',
adminName: '张三',
testValues: [
{
code: '001',
value: '测试一'
},
{
code: '002',
value: '测试二'
},
{
code: '003',
value: '测试三'
}
],
taskTypes: [
{
code: '001',
value: '测试一'
},
{
code: '002',
value: '测试二'
},
{
code: '003',
value: '测试三'
}
],
caseTypes: [
{
code: '001',
value: '测试一'
},
{
code: '002',
value: '测试二'
},
{
code: '003',
value: '测试三'
}
],
},],
}
},
methods: {
}
}
</script>
<style scoped>
>>> .has-gutter tr>th:nth-child(2){
padding-left: 10px !important;
}
>>> .el-table--enable-row-transition .el-table__body td:nth-child(2){
padding-left: 10px !important;
}
>>> .has-gutter tr>th:nth-last-child(2){
text-align:center;
}
>>> .el-table--enable-row-transition .el-table__body td:last-child{
padding-left: 10px !important;
}
>>> .el-table--enable-row-transition .el-table__body td{
padding:0;
}
>>> .cell .el-tooltip{
padding:0 !important;
}
>>> .el-table .cell{
padding: 0 !important;
}
.annotation-rs:last-child{
border:0;
}
.annotation-rs{
margin-top: 5px;
border-bottom: 1px solid #EBEEF5;
}
</style>
版权声明：本文为qq_41011920原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。