e-table

字典样式表格权限组合插槽bind

• table - 属性
• column - 列属性
• UI - 示例

1. 通过 adaptor 适配器 实现各自表单组件
2. 通过配置 columns 构成表单项
3. 可以通过 category 分组功能实现表单项切换
4. 通过定义 remote dict 实现自动适配字段，同时也可以通过配置 dicts 自定义字典内容。
5. 可以通过配置 size rowStyle highlightCurrentRow、height maxHeight 属性实现不同样式
6. 可以通过配置 summary spanMethod showSummary 展示合计信息
7. 通过设置 selection hash 实现表格 Checkbox 选项
8. 通过 has 控制表单权限

<i-table-props> Props

参数名	描述	类型	默认值
adaptor	表格适配器 v3 old	string	undefined
model-value (v-model)	表格数据	any[]	undefined
data	表格数据（同时支持）	any[]	undefined
remote	从远端获取字典数据	boolean	false
dicts	自定义字典	Record<string, any>	undefined
columns	表格列配置	any[]	undefined
category	配合columns 中 category 属性使用	string	undefined
has	权限控制	string	undefined
action-list	操作列按钮	any[]	undefined
action-fn	操作列按钮控制	(list: any[], evt: any) => any[]	undefined
height	表格高度	string | number	undefined
max-height	表格最大高度	string | number	undefined
stripe	是否为斑马纹 table	boolean	undefined
border	是否带有纵向边框	boolean	undefined
size	Table 的尺寸 large / default /small	string	-
fit	列的宽度是否自撑开	boolean	true
show-header	是否显示表头	boolean	true
highlight-current-row	是否要高亮当前行	boolean	false
row-class-name	行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。	string | ((row: any, index: number) => string)	-
row-style	行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。	object | ((row: any, index: number) => object)	-
cell-class-name	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className	string | (({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }) => string)	false
cell-style	单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有单元格设置一样的 Style。	string | (({ row, column, rowIndex, columnIndex }: { row: any; column: any; rowIndex: number; columnIndex: number }) => string)	false
default-expand-all	是否展开	boolean	false
show-summary	是否在表尾显示合计行	boolean	false
summary-method	自定义的合计计算方法	(params: { columns: any[] data: any[] pageData: any[] footerData: any[] summaries: any[] }) => any[]	-
span-method	合并行或列的计算方法	(params: { row: any column: any rowIndex: number columnIndex: number data: any[] }) => { rowspan: number; colspan: number }	-
empty-text	空数据时显示的文本内容， 也可以通过 #empty 设置	string	-
layout	页面样式	string	-
selection	是否显示多选框	boolean	false
hash	唯一值	string	-
row-key		string | ((row: any, index: number) => string)	-

Table 属性

const column = [ {label: '', prop: '',  }, {label: '', prop: '',  } ]

常用属性

1. label 表单项文本
2. prop 字段名（实体的键名）
3. width 表单项宽度
4. slot 在表单中配置插槽
5. adaptor 搭配其他组件使用，如:输入框input、选择框select、时间选择器date等
6. 9. has 字段项权限, 分别是'edit'、'read'
7. 等各自组件相关属性

columns 与 category

1. columns 配置表单项，v-model配置数据项实现表格展示

dicts 字典

高度与最大高度

columns 多级表头

1. 通过设置多级columns表单项构成多级表头

has 权限控制

1. 控制组件渲染方式， 只读状态下不渲染组件， 只展示数据
2. 控制操作列，只读状态无编辑与删除，只有查看按钮

actionList操作列

1. 标准数据格式 { label: "", prop: "", wrapperClass:"" }
2. 若为 通用属性 "read", "edit", "delete" 则可直接引用 [ "read","edit","delete" ]

action-fn 根据数据渲染操作列内容

返回的数据必须是数组 [{ label: '', prop: '', wrapperClass:'' }]

1. 可以通过配置 actionList 的列表执行过滤
2. 可以自定义渲染的按钮

expand 展开行

扩展中的数据从其他渠道获得（接口、异步操作）

column 列属性

h 自定义渲染单元格

通过 h 自定义渲染样式

header 自定义渲染表头样式

通过 header 自定义渲染标题样式

slot 插槽

1. 在表单项中配置slot
2. 在组件内编写slot对应的内容

fixed 固定

显示效果文档中暂时存在问题

adaptor:select

adaptor:selector

1. 在columns中配置adaptor: 'select'
2. 设置多级选项则在option中配置children属性

adaptor:checkbox

typeof: "number"

adaptor:radio

增加配置 { typeof: "number" } 同样的数据展示不同的结果

adaptor:switch

执行前提示

adaptor:tag

应用场景以数据区分: 1. 数组 2. 单一数据 暂无, 推荐方案以插槽方式解决

bind 根据行数据自定义返回对象

bind 中返回的数据会覆盖，前面定义的。

const f1 = { adaptor: 'switch',  typeof: 'string',  activeValue: 1,  inactiveValue: 0 }
const f2 = { adaptor: 'switch',  typeof: 'string', bind: ()=> { activeValue: 1,  inactiveValue: 0 } }

f1 == f2

UI 示例

tag小圆点