OverflowList

Often used for operation columns in tables. When there are many operation items, this component can be used to show or hide operations. Currently, only the v-if directive is supported on child elements; the v-show directive is not supported.

Basic

Please refer to the code for specific usage. Content must be embedded within the component.

<template>
  <epp-overflow-list :show-count="3">
    <el-button link type="primary">操作1</el-button>
    <el-switch />
    <el-button v-if="true" link>操作3</el-button>
    <el-button v-if="false" link>操作4</el-button>
    <el-button link type="primary">操作5</el-button>
  </epp-overflow-list>
</template>
<script lang="ts" setup>
</script>

Custom More Icon

Example code

<template>
  <epp-overflow-list :dropdown-props="{ trigger: 'click' }">
    <el-button link type="primary">操作1</el-button>
    <el-button link type="primary">操作2</el-button>
    <el-button link type="primary">操作3</el-button>
    <el-button link type="primary">操作4</el-button>
    <el-button link type="primary">操作5</el-button>
    <template #more>
      <el-icon>
        <Film />
      </el-icon>
    </template>
  </epp-overflow-list>
</template>
<script lang="ts" setup>
import { Film } from '@element-plus/icons-vue';
</script>

Expand Mode

第一行内容(First Line)

第二行内容(Second Line)

第三行内容(Third Line)

第四行内容(Fourth Line)

第五行内容

Example code

<template>
  <epp-overflow-list :show-count="3" show-type="expand">
    <p>第一行内容(First Line)</p>
    <p>第二行内容(Second Line)</p>
    <p>第三行内容(Third Line)</p>
    <p>第四行内容(Fourth Line)</p>
    <p>第五行内容</p>
    <template #more="{ hasMore, show, hide }">
      <el-icon size="20px" style="cursor: pointer; margin-left: 16px">
        <Download v-if="hasMore" @click="show" />
        <Upload v-else @click="hide" />
      </el-icon>
    </template>
  </epp-overflow-list>
</template>
<script lang="ts" setup>
import { Download, Upload } from '@element-plus/icons-vue';
</script>

Attributes

Parameter	Description	Type	Optional Values	Default Value
show-count	The number of items to display	number	—	1
show-type	Display type	tooltip / expand	—	tooltip
dropdown-props	Properties of the Dropdown component. Refer to the Element Plus Dropdown component.	object	—	—

Slots

Name	Description
-	Default content slot
more	Custom display of the "more" element. Parameter is { hasMore, show, hide }