# Table 数据表格

CRUD 组件下的表格组件

基本列表展示

插槽方式修改列内容

自定义操作栏

列的内容也可以直接用 component 渲染

右键菜单配置

# 参数

参数 说明 类型 可选值 默认值
columns 表格项 el-table-item array
on 原 el-table 事件 object
props 原 el-table 参数 object
auto-height 是否自动计算高度 boolean true
context-menu 右键菜单 boolean, array refresh, update, delete, check, order-desc, order-asc true

# context-menu 有效值:

  • refresh 刷新列表

  • update 编辑当前行

  • delete 删除当前行

  • check 勾选当前行

  • order-desc 根据当前行的 prop 降序

  • order-asc 根据当前行的 prop 升序

提示

cl-crud 高度不固定的情况下,把 auto-height 置为 false,避免高度缺失

# 方法

方法名 说明 参数
setColumn 设置列数据,如 label 、align prop, data
showColumn 显示列 props
hiddenColumn 隐藏列 props
clearSelection 用于多选表格,清空用户的选择
toggleRowSelection 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中 row, selected
toggleAllSelection 用于多选表格,切换所有行的选中状态
toggleRowExpansion 用于可展开表格与树形表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开) row, expanded
setCurrentRow 用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态 row
clearSort 用于清空排序条件,数据会恢复成未排序的状态
clearFilter 不传入参数时用于清空所有过滤条件,数据会恢复成未过滤的状态,也可传入由 columnKey 组成的数组以清除指定列的过滤条件 columnKey
doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法
sort 手动对 Table 进行排序。参数 prop 属性指定排序列,order 指定排序顺序。 prop, order

# 插槽

name 说明
append 插入至表格最后一行之后的内容,如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。若表格有合计行,该 slot 会位于合计行之上。
column-{prop} 自定义列的内容,参数为 { scope: { row, column, $index } }
header-{prop} 自定义表头的内容. 参数为 { scope: { row, column, $index } }

# columns 参数

参数 说明 类型 可选值 默认值
type 列的类型 string op / index / selection / expand
index 如果设置了 type=index,可以通过传递 index 属性来自定义索引 number, function(index)
label 显示的标题 string
prop 列内容的字段名 string
dict 字典 array
dict.label 显示名称 string
dict.value 匹配值 string , number
dict.type 类型 string success / primary / warning / danger / info
component 渲染组件 string, object
width 列的宽度 string
min-width 列的最小宽度 string
sortable 列是否可以排序 boolean, string true / false / 'custom' false
formatter 用来格式化内容 function(row, column, cellValue, index)
buttons type="op" 有效 array edit, delete
name type="op" 有效,类型名称 string dropdown-menu
dropdown-menu type="op" 有效,使操作按钮变为下拉模式 object
dropdown-menu.width type="op" 有效,宽度 string 97px
dropdown-menu.label type="op" 有效,标题 string 更多操作
more... 保持与 el-table-column 一致 (opens new window)

# type 有效值:

  • op 操作栏,编辑按钮、删除按钮

  • index 显示该行的索引

  • selection 显示多选框

  • expand 显示为一个可展开的按钮