
<template>
<el-table :data="tableData" :span-method="objectSpanMethod">
<el-table-column label="车联网卡号码" prop="carNetworkNumber">
<template slot-scope="scope">
<span v-if="!scope.row.isOpen">
<em class="visible" @click="scope.row.isOpen = true"></em> {{ (scope.row.carNetworkNumber).replace(/^(.{3})(.*)(.{4})$/, '$1****$3') }}
</span>
<span v-else>
<em class="invisible" @click="scope.row.isOpen = false"></em> {{ scope.row.carNetworkNumber }}
</span>
</template>
</el-table-column>
<el-table-column label="归属运营商" prop="owningCarrier" show-overflow-tooltip />
<el-table-column label="号码归属" prop="address" show-overflow-tooltip />
<el-table-column label="用户状态" prop="state" show-overflow-tooltip />
<el-table-column label="渠道类型" prop="channelType" show-overflow-tooltip />
<el-table-column label="入网时间" prop="createTime" show-overflow-tooltip />
<el-table-column label="功能开通情况" prop="currentCondition" show-overflow-tooltip />
<el-table-column label="购卡企业名称" prop="enterpriseInfo" show-overflow-tooltip />
<el-table-column label="购车用户类型" prop="customerType" show-overflow-tooltip />
</el-table>
</template>
<script>
export default {
data(){
return {
tableData:[
{
isOpen:false,
carNetworkNumber:'19012345612',
owningCarrier:'电信',
address:'省市区(县)',
state:'营业停机',
channelType:'自有实体渠道',
createTime:'2024-08-02 10:30:02',
currentCondition:'语音',
enterpriseInfo:'xxxxx技术有限公司',
customerType:'个人用户',
},
{
isOpen:false,
carNetworkNumber:'19078945612',
owningCarrier:'',
address:'',
state:'',
channelType:'',
createTime:'',
currentCondition:'',
enterpriseInfo:'',
customerType:'',
},
{
isOpen:false,
carNetworkNumber:'19078945612',
owningCarrier:'',
address:'',
state:'',
channelType:'',
createTime:'',
currentCondition:'',
enterpriseInfo:'',
customerType:'',
},
]
}
},
methods:{
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
const flag = row.owningCarrier && row.address && row.state && row.channelType && row.createTime && row.currentCondition && row.customerType
if (columnIndex === 1) {
if(flag){
return { rowspan: 0, colspan: 0 };
}else{
row.owningCarrier = '暂无数据'
return { rowspan: 1, colspan: 8 };
}
}
},
}
}
</script>