OverflowList 折叠列表

通常用于表格操作列，当操作项比较多时，可利用此组件进行操作的显隐。目前仅支持子元素上使用v-if指令，不支持v-show指令。

基础用法

具体用法请看代码，组件内一定要嵌入内容

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

自定义More图标

示例代码

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

展开方式

第一行内容(First Line)

第二行内容(Second Line)

第三行内容(Third Line)

第四行内容(Fourth Line)

第五行内容

示例代码

<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

参数	说明	类型	可选值	默认值
show-count	显示的数量	number	—	1
show-type	显示的类型	tooltip / expand	—	tooltip
dropdown-props	Dropdown组件的属性，参考 Element Plus Dropdown组件	object	—	—

Slots

名称	说明
-	默认内容插槽
more	自定more元素的展示，参数为{ hasMore, show, hide }