fix(接口测试): 修复接口测试标签过多时tooltip没有分隔符号的问题

--bug=1013767 --user=宋天阳 【接口测试】github#14266 接口列表标签过多时,Tag显示需要有分隔
https://www.tapd.cn/55049933/s/1175425
This commit is contained in:
song-tianyang 2022-06-07 18:07:18 +08:00 committed by f2c-ci-robot[bot]
parent 49fab1cf3b
commit 1c4828154e
1 changed files with 25 additions and 6 deletions

View File

@ -119,11 +119,17 @@
:field="item" :field="item"
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
min-width="80px" min-width="80px"
:show-overflow-tooltip = false
:label="$t('commons.tag')"> :label="$t('commons.tag')">
<template v-slot:default="scope"> <template v-slot:default="scope">
<ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain" <el-tooltip class="item" effect="dark" placement="top">
:show-tooltip="scope.row.tags.length===1&&itemName.length*12<=100" :content="itemName" <div v-html="getTagToolTips(scope.row.tags)" slot="content"></div>
style="margin-left: 0px; margin-right: 2px"/> <div class="oneLine">
<ms-tag v-for="(itemName,index) in scope.row.tags" :key="index" type="success" effect="plain"
:show-tooltip="scope.row.tags.length===1&&itemName.length*12<=100" :content="itemName"
style="margin-left: 0px; margin-right: 2px"/>
</div>
</el-tooltip>
<span/> <span/>
</template> </template>
</ms-table-column> </ms-table-column>
@ -952,6 +958,17 @@ export default {
} }
}); });
} }
},
getTagToolTips(tags){
try{
let showTips = "";
tags.forEach( item => {
showTips += item + ",";
})
return showTips;
}catch (e){
return "";
}
} }
}, },
}; };
@ -996,8 +1013,10 @@ export default {
padding-right: 100%; padding-right: 100%;
} }
/* /deep/ .el-table__fixed-body-wrapper { .oneLine {
top: 60px !important; overflow: hidden;
} */ white-space: nowrap;
text-overflow: ellipsis;
}
</style> </style>