用elementui，实现在表格中的tag标签显示，如果他的元素个数大于3个，那么第三个标签就显示+几，鼠标移动显示剩余元素，如果＜=3,就正常显示

qq_51846847

1494人浏览 · 2023-06-19 10:19:56

qq_51846847 · 2023-06-19 10:19:56 发布

如果 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>