chords-ui

Appearance

On this page

基础用法 ​

带状态表格 ​

可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class， 这样就可以自定义每一行的样式了。

注意：默认情况下 BasicTable 的 stripe 是启用的，应该避免产生冲突。

固定表头 ​

纵向内容过多时，可选择固定表头。

只要在 BasicTable 元素中定义了 height 属性，即可实现固定表头的表格，而不需要额外的代码。

展开行 ​

多选 ​

需要用到实例的地方需要增加 tableRef.xxx 比如 multipleTableRef.value.tableRef!.toggleRowSelection(row, undefined)

自定义索引 ​

自定义表头 ​

自定义表头两种方式

使用 renderHeader 执行某一列自定义 ​

该方案会触发控制台警告，压力给到 element-plus 这边。详情参考 问题

使用 header 插槽统一修改 table header ​

slot 与 render ​

某一列支持通过 slot 或者 render 方式进行渲染。

通过 customRender 进行控制，如果值为 render 则需要配合 render 函数实现，否则就是对应值的 slot

分页表格 ​

编辑列 ​

编辑行 ​

API ​

Attributes ​

名称说明类型默认值必填
$attrs支持 ElTable 所有属性及方法否
columnscolumn 的配置TableColumn[]否
data数据源Recordable[]否
configtable 配置TableConfig否

Column 除官方参数外拓展以下参数 ​

名称说明类型默认值必填
$attrs支持 ElTableColumn 的所有属性否
formatter非 slot 时对内容进行格式化，优先级低于 slot否
placeholder当该单元格值为空时显示的值，默认为 -否
customRendercustom 值等于 render 时传入 render 生效，否则它的值就被视为 slotstring否
rendercustom 值等于 render 时的函数Function否
type索引，勾选，展开表格时使用string 否
editable是否开启表格编辑boolean否
editRow是否开启编辑行boolean否
editColumn是否开启编辑列boolean否
editColumnScheduler对编辑组件的触发控制Functionfunction (): Promise<boolean>否
editRule对应编辑组件的表单校验booleantrue否
editComponent编辑组件ComponentsTypeElInput否
editComponentProps对应编辑组件的 propsRecordable{}否

支持编辑组件

ts
import {
  ElInput, ElInputNumber,
  ElSelect, ElSelectV2, ElTimeSelect, ElCascader,
  ElSwitch,
  ElTimePicker, ElDatePicker, ElMessage,
  ElOption
} from 'element-plus';

export type ComponentsType = 'ElInput' |
  'ElInputNumber' |
  'ElSelect' |
  'ElSwitch' |
  'ElTimeSelect' |
  'ElTimePicker' |
  'ElSelectV2' |
  'ElDatePicker' |
  'ElCascader'
import {
  ElInput, ElInputNumber,
  ElSelect, ElSelectV2, ElTimeSelect, ElCascader,
  ElSwitch,
  ElTimePicker, ElDatePicker, ElMessage,
  ElOption
} from 'element-plus';

export type ComponentsType = 'ElInput' |
  'ElInputNumber' |
  'ElSelect' |
  'ElSwitch' |
  'ElTimeSelect' |
  'ElTimePicker' |
  'ElSelectV2' |
  'ElDatePicker' |
  'ElCascader'

Config table 的额外配置 ​

名称说明类型默认值必填
isPagination是否开启分页booleantrue否
pagination分页的配置Recordable 否

Events ​

名称说明类型
edit-column-changetable cell 编辑完成后触发function (scope): void
current-change当前页面更改时触发function (pageNum: number): void

Methods ​

名称说明参数
tableReftableRef.xxx 支持 ElTable 的所有方法
setEditRowIndex设置 index 编辑行时使用`number
getEditRowIndex获取当前正在被编辑的行
cancelEdit退出编辑行模式

Slots ​

插槽名说明子标签
header统一表头的修改
expand展开行