如果 slotProp.row.material_type_name 有 5 个元素,且它们分别是 "材料1"、"材料2"、"材料3"、"材料4"、"材料5",那么显示出来的 tag 将会是 "材料1"、"材料2"、"+3",鼠标上移显示剩余元素。如果 slotProp.row.material_type_name 3个元素,且它们分别是 "材料1"、"材料2"、"材料3,那么显示出来的 tag 将会是 "材料1"、"材料2"、"材料3",写出代码。如果slotProp.row.material_type_name 2个元素,且它们分别是 "材料1"、"材料2",那么显示出来的 tag 将会是 "材料1"、"材料2",
实现代码
<div v-else-if="slotProp.propKey === 'material_type_name'">
<template v-if="slotProp.row && slotProp.row.material_type_name && slotProp.row.material_type_name.length > 3">
<el-tag class="tagMarign" v-for="(item, index) in slotProp.row.material_type_name.slice(0, 2)" :key="index">{{
item }}</el-tag>
<el-tooltip :content="slotProp.row.material_type_name.slice(2).join(', ')">
<el-tag>{{ `+${slotProp.row.material_type_name.length - 2}` }}</el-tag>
</el-tooltip>
</template>
<template v-else-if="slotProp.row && slotProp.row.material_type_name">
<el-tag class="tagMarign" v-for="(item, index) in slotProp.row.material_type_name" :key="index">{{ item
}}</el-tag>
</template>
</div>