Skip to content

ETable(表格)

el-table 的简单封装,用于基础的表格数据展示。不适合做大量数据的展示,单页展示建议不超过 100 行,可搭配分页组件实现前端分页或后端分页。

属性配置

属性配置示意图

配置说明
纵向边框border 参数,默认不开启
斑马条纹stripe 参数,默认不开启
显示表头show-header 参数,默认开启
列自撑开fit 参数,默认开启
大小size 参数,默认值
高度height 参数,大于 0 时生效,默认 0
最大高度max-height 参数,大于 0 时生效,默认 0
列索引是否开启索引列,默认不开启
索引列宽设置索引列的宽度
多选是否开启多选列,默认不开启
多选列宽设置多选列的宽度
高亮当前行highlight-current-row 参数,默认不开启
空值展示empty-text 参数,默认 "No Data"

TIP

具体参数含义请参考 el-table 组件官方说明。

数据配置

数据配置示意图

配置说明
静态表头默认为静态表头
表头数据JSON 格式的数组,数组元素为列对象 {prop: '', label: ''}
取-表头数据关闭静态表头时,从缓存地址中获取表头数据(数组形式)
取-表格数据从缓存地址中获取表格数据或包含表格数据的对象
解析表格数据从缓存地址获取的对象中解析表格数据的 Key(支持路径)
存-表格数据暂不需要,当前为简单表格,不支持编辑,回写数据意义不大

事件说明

选项改变(selectItem)

当选中行发生变化时触发,会写入组件参数:

  • currentRow:当前选中的行数据
  • oldCurrentRow:前一次选中的行数据

多选改变(selectionChange)

当开启多选时,选中或取消选中行都会触发,会写入组件参数:

  • newSelection:当前所有选中行的数组

基于 VitePress 构建