1. docs
sss
  • docs
    • docs
      • EleProLayout 高级布局组件使用文档
      • Markdown - ByteMdEditor
      • 下拉菜单 - EleDropdown
      • 主题功能
      • 二维码 - EleQrcode
      • 全局配置 - EleConfigProvider
      • 其他功能
      • 分段器 - EleSegmented
      • 分页组件 - ElePagination
      • 加载中 - EleLoading
      • 包裹组件 - EleApp
      • 卡片组件 - EleCard
      • 可选卡片 - EleCheckCard
      • 图标选择 - EleIconSelect
      • 富文本 - TinymceEditor
      • 导航菜单 - EleMenus
      • 工具方法与表单数据操作文档
      • 抽屉组件 - EleDrawer
      • 文字提示 - EleTooltip
      • 文本组件 - EleText
      • 标签输入 - EleEditTag
      • 标签页 - EleTabs
      • 树下拉 - EleTreeSelect
      • 步骤条 - EleSteps
      • 气泡确认框 - ElePopconfirm
      • 消息提示 - EleMessage
      • 统计图表 - VueEcharts
      • 表格下拉 - EleTableSelect
      • 表格组件 - EleDataTable
      • 警告提示 - EleAlert
      • 页面容器 - ElePage
      • 高级弹窗 - EleModal
      • 高级表格 - EleProTable
  1. docs

表格下拉 - EleTableSelect

5.30.1.快速使用
表格下拉组件使用高级表格 EleProTable 封装,支持单选和多选,使用示例:


运行代码 新窗口打开
可以通过 ref 调用 EleProTable 的实例方法:

运行代码 新窗口打开
5.30.2.多选示例
增加 multiple 属性开启多选,同时需要给表格增加复选框列,使用示例:


运行代码 新窗口打开
5.30.3.属性列表
  如果分页时用 value 回显当前页不存在的数据就无法显示 label ,因为 value 是 valueKey 对应属性的值, 所以增加了 initValue 属性用于回显数据(v1.1.6开始建议使用cacheData属性),initValue 是 Object 类型,需要至少有 valueKey 和 labelKey 配置的字段。
表格分页时回显当前页不存在的数据会无法显示文本,可使用 cacheData 属性设置当前页不存在的数据用于回显:

运行代码 新窗口打开
例如单选时通过 initValue 回显数据(v1.1.6 开始建议使用 cacheData 属性替代):

多选时通过 initValue 回显数据(v1.1.6 开始建议使用 cacheData 属性替代):

5.30.4.事件列表
select 事件会返回选择的行对应的数据源的数据,使用示例:

运行代码 新窗口打开
5.30.5.插槽列表
  多选是标签超出配置的最大数量后默认会显示 +1 的提示文本可通过 maxTagPlaceholder 插槽自定义, 插槽传递的 omittedValues 为超出的标签数据(为标签文本和对应值组成的数组[{label, value}])。
5.30.6.常见问题
当下拉表格中存在 ElSelect 组件时,ElSelect 选择完成后会导致下拉表格的下拉框关闭,可以通过 teleported 属性解决:

运行代码 新窗口打开

修改于 2025-12-20 03:37:01
上一页
统计图表 - VueEcharts
下一页
表格组件 - EleDataTable
Built with