![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ca90164cce1f5f2dc68765d96da285f4.png)
<el-table-column prop="labelList" label="客户标签" min-width="250">
<template slot-scope="scope">
<template v-if="scope.row.labels.length">
<el-row class="row-tag">
<el-col :span="20" :class="scope.row.showTags?'':'isUnfold'">
<span class="span-tag" v-for="(item,index) in scope.row.labels" :key="index" :title="item">
<el-tooltip :content="item" placement="top">
<span>{{ item }}</span>
</el-tooltip>
</span>
</el-col>
<el-col :span="4">
<a style="border:0;" @click="scope.row.showTags = !scope.row.showTags"><i :class="scope.row.showTags?'el-icon-arrow-up':'el-icon-arrow-down'"></i>
{{ scope.row.showTags ? '收起': '展开' }}</a>
</el-col>
</el-row>
</template>
<template v-else>-</template>
</template>
</el-table-column>
.row-tag {
.el-col-4 {
width: 100px;
}
.el-col-20 {
width: calc(100% - 100px);
}
.isUnfold {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.span-tag {
display: inline-block;
width: 78px;
height: 28px;
padding: 0 5px;
text-align: center;
line-height: 28px;
font-size: 12px;
color: #0083ff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: #e8f4ff;
border-radius: 2px;
margin: 0 10px 3px 0;
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7db901278880efa12c24b7d9b3c21cc2.png)
<el-table-column
slot="headSalesName"
label="线下活动负责人"
min-width="150"
align="left"
>
<template slot-scope="scope">
<div class="flex flex-t-center">
<img :src="scope.row.avatar ? scope.row.avatar : defaultface" class="avatar-box" alt="">
<span>{{ scope.row.headSalesName ? scope.row.headSalesName : '--'}}</span>
</div>
</template>
</el-table-column>
.flex {
display: flex;
display: -webkit-flex;
}
.flex-t-center {
align-items: center;
}
.avatar-box {
width: 28px;
height: 28px;
border-radius: 50%;
margin-right: 5px;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5483f07e4a101e7c5ba4874022f54af2.png)
<el-table-column slot="users" label="引流成员" width="170">
<template slot-scope="scope">
<div class="users-box" v-if="scope.row.memberList && scope.row.memberList.length">
<div class="flex flex-t-center users-box-list" v-for="(item, index) in scope.row.memberList" :key="index">
<img :src="item.avatar ? item.avatar : defaultface" class="avatar-box" alt />
<el-tooltip class="item" effect="dark" :content="item.accountName" placement="top-start" :disabled="item.accountName && item.accountName.length > 6 ? false: true">
<span>{{ getName(item.accountName)}}</span>
</el-tooltip>
</div>
</div>
<div v-else class="users-box">
<div class="flex flex-t-center users-box-list">
<img :src="defaultface" class="avatar-box" alt />
<span>--</span>
</div>
</div>
</template>
</el-table-column>
.users-box {
max-height: 90px;
overflow-y: auto;
.users-box-list {
margin-bottom: 5px;
}
&:last-child {
margin-bottom: 0;
}
}
.flex {
display: flex;
display: -webkit-flex;
}
.flex-t-center {
align-items: center;
}
.avatar-box {
width: 28px;
height: 28px;
border-radius: 50%;
margin-right: 5px;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ef49aaf0a6d46d0240f8f3325a052cbd.png)
<div class="tableContainer">
<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" default-expand-all
@selection-change="handleSelectionChange" :row-class-name="cellClass"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column type="selection" width="60">
</el-table-column>
<el-table-column prop="goods" label="商品" width="260" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="prise" label="订单金额" width="80">
</el-table-column>
<el-table-column prop="person" label="购买人">
</el-table-column>
<el-table-column prop="person" label="操作" fixed="right" align="right" width="180px">
<template slot-scope="{row}">
<span @click="toOrderDetail(row.id)" style="color:#0083FF;" v-if="row.children==undefined">详情</span>
<p class="tablePerson" style="color:#333333;" v-else><span>企微员工:</span><img src="" alt=""><span
style="color: #74788D;">昌云婷</span></p>
</template>
</el-table-column>
</el-table>
data(){
return{
tableData: [{
id: 3,
goods: '订单编码: 225214524151212',
prise: '',
person: '',
children: [{
id: 31,
goods: '幸运方便面',
prise: '12.00',
person: '王小虎'
}, {
id: 32,
goods: '幸运方便面',
prise: '12.00',
person: '王小虎'
}]
},
}
}
methods(){
cellClass({row}) {
if (!row.hasOwnProperty('children')) {
return 'disableheadselection'
} else {
return 'orderCode'
}
},
}
.tableContainer {
background-color: #fff;
/deep/ .el-table__expand-icon {
display: none;
}
/deep/ .disableheadselection {
color: #8c8c8c;
>td:first-child {
>.cell {
>.el-checkbox {
display: none;
}
}
}
}
/deep/ .orderCode {
color: #333333;
}
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/59acd96927ba6e25271aee7ea99ea2e9.png)
<el-table-column label="员工账号 " prop="loginName" width="180">
<span slot-scope="scoped" class="member-info">
<img class="user-avatar" :src="scoped.row.avatar" alt="">
<div>
<h6><i :title="scoped.row.loginName">{{scoped.row.loginName}}</i> <span v-if="scoped.row.isLeaderInDept === 1">上级</span></h6>
<p>{{scoped.row.phoneNumber}}</p>
</div>
</span>
</el-table-column>
.member-info {
display: flex;
align-items: center;
> div {
flex: 1;
display: flex;
flex-direction: column;
width: 90%;
}
h6 {
color: #000;
font-weight: normal;
height: 25px;
i {
float: left;
max-width: 60%;
overflow: hidden;
height: 25px;
text-overflow: ellipsis;
white-space: nowrap;
}
span {
height: 18px;
line-height: 18px;
padding: 0 5px;
background-color: #d1e9ff;
color: #1890ff;
font-size: 12px;
border-radius: 2px;
display: inline-block;
margin-left: 5px;
}
}
p {
color: #666666;
height: 20px;
}
}
.user-avatar {
width: 31px;
height: 31px;
border-radius: 50%;
margin-right: 10px;
flex-shrink: 0;
}