Name Description Parameters change 选中值发生变化时触发 目前的选中值 visible-change 下拉框出现/隐藏时触发 出现则为 true，隐藏则为 false remove-tag 多选模式下移除 tag 时触发 移除的 tag 值 clear 可清空的单选模式下用户点击清空按钮时触发 - blur 当 input 失去焦点时触发 (event: Event) focus 当 input 获得焦点时触发 (event: Event) node-click 节点被点击时的回调 共三个参数，依次为：传递给 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 node-contextmenu 当某一节点被鼠标右键点击时会触发该事件 共四个参数，依次为：event、传递给 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。 check-change 节点选中状态发生变化时的回调 共三个参数，依次为：传递给 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点 check 当复选框被点击的时候触发 共两个参数，依次为：传递给 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性 current-change 当前选中节点变化时触发的事件 共两个参数，依次为：当前节点的数据，当前节点的 Node 对象 node-expand 节点被展开时触发的事件 共三个参数，依次为：传递给 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 node-collapse 节点被关闭时触发的事件 共三个参数，依次为：传递给 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身 node-drag-start 节点开始拖拽时触发的事件 共两个参数，依次为：被拖拽节点对应的 Node、event node-drag-enter 拖拽进入其他节点时触发的事件 共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event node-drag-leave 拖拽离开某个节点时触发的事件 共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event node-drag-over 在拖拽节点时触发的事件（类似浏览器的 mouseover 事件） 共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event node-drag-end 拖拽结束时（可能未成功）触发的事件 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event node-drop 拖拽成功完成时触发的事件 共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、eventel-radio 增强
传入 data 数据将自动生成选项
将传入 data 数据中的某项设置为 即可
通过 config 配置数据键值。- v-model 绑定的键值、-显示键值、-控制不可选的键值、-原生 name 的键值
使用 显示按钮样式的多选框组
Name Description Type Options Default v-model 绑定值 array - - data 绑定数据 array - - config 配置绑定数据键值 object - size 尺寸 string medium / small / mini - disabled 是否禁用 boolean - false text-color 按钮形式激活时的文本颜色 string - #ffffff fill 按钮形式激活时的填充色和边框色 string - #409EFF border 是否显示边框 boolean - false remoteConfig 远程加载配置，请参考下面 object - -
Name Description Type Options Default method 请求方法 string params 请求参数 - - cache 是否缓存结果 boolean - cache-key 本地缓存表名 string - storage-type 缓存类型 StorageType expires 缓存过期时间，单位：天 number - url 请求路径 string - - key 缓存本地数据表中的key值。默认使用参数的值拼接 string - -
Name Description Parameters change 绑定值变化时触发的事件 选中的 Radio label 值
Name Description Type Options Default v-model 绑定值 array - - data 绑定数据 array - - config 配置绑定数据键值 object - size 尺寸 string medium / small / mini - disabled 是否禁用 boolean - false text-color 按钮形式激活时的文本颜色 string - #ffffff fill 按钮形式激活时的填充色和边框色 string - #409EFF
Name Description Parameters change 绑定值变化时触发的事件 选中的 Radio label 值
Name Description Type Options Default v-model 绑定值 array - - data 绑定数据 array - - config 配置绑定数据键值 object - size 尺寸 string medium / small / mini - disabled 是否禁用 boolean - false min 可被勾选的的最小数量 number - - max 可被勾选的的最大数量 number - - text-color 按钮形式激活时的文本颜色 string - #ffffff fill 按钮形式激活时的填充色和边框色 string - #409EFF border 是否显示边框 boolean - false remoteConfig 远程加载配置，请参考下面 object - -
Name Description Type Options Default v-model 是否显示 Dialog boolean - - draggable 是否可拖拽窗口 boolean - true show-full-screen 是否显示全屏图标，如果是自定义插槽该属性无效 boolean - true fixed-height 是否固定弹窗内容高度 boolean - false confirm-props 确定按钮属性，见下方 object - cancel-props 确定按钮属性，见下方 object - auto-width 是否启用自动
计算宽度。详情见下方 boolean - true width-config 自动计算宽度配置。 object - cancel-close 是否点击取消按钮的时候关闭弹窗 boolean - true before-close 关闭前的回调，会暂停 Dialog 的关闭，如果没有传值，那么直接关闭弹窗 function(done)，done 用于关闭 Dialog - - helper-message 显示提示信息内容，不为空的时候显示 组件 `string string[]` - loading 弹窗内容是否显示 loading boolean - false
Name Description Parameters validate 对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise Function(callback: Function(boolean, object)) validateField 对部分表单字段进行校验的方法 Function(props: array resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 - clearValidate 移除表单项的校验结果。传入待移除的表单项的 prop 属性或者 prop 组成的数组，如不传则移除整个表单的校验结果 Function(props: array
ElForm 表单增强
当 绑定的是一个具有响应式的数组时，数组的变动会影响表单变动（及动态表单）。如果不需要动态表单推荐绑定一个普通数组，
支持动态 ，动态禁用，动态显示功能。支持字段名称多层级（ 最终会解析成 ）
添加 属性进行分组
与使用 el-row 和 el-col 组件相同 (el-col 对应 field)，通过相关配置可以自由地组合布局。
Name Description Type Options Default v-model 绑定值 object - - fields 表单项配置，参考下面 fields 属性 array - - action 操作项按钮配置，参考下面 action属性 object - - inner-label 是否使用内置 label 模式， 组件无效 boolean - false enter-on-submit 输入框回车触发提交按钮点击事件，如果开启则自定义的 事件无效 boolean false validate-on-submit 点击提交按钮的时候校验表单，拦截并提示校验不通过的内容 boolean true first-auto-focus 进入页面第一个输入框是否获取焦点，只有第一个元素是 input 的时候有效 boolean true show-more 是否显示更多，需要配合使用，
如果需要记住状态需要配置 RouteName，我们会把 RouteName 做为保存在浏览器中的 key boolean false limit 最多显示多少个项，的时候有效 number 4 highlight-error 表单验证不通过的时候输入框是否高亮 boolean - true highlight-required 表单必填项输入框是否高亮 boolean - true gutter 栅格间隔，如果定义了属性默认一个属性就是一个标签 number - 0 justify flex 布局下的水平排列方式，如果定义了属性默认一个属性就是一个标签 string start / end / center / space-around / space-between start align flex 布局下的垂直排列方式，如果定义了属性默认一个属性就是一个标签 string top / middle / bottom top field-adaptive 表单项自适应栅格系统，开启后会自动添加属性 boolean - false fixed-action 是否把表单的操作按钮固定在左边，查询表单的时候很有用 boolean - false enter-next 回车是否跳转到下一个元素 boolean - true scroll-to-error 校验不通过示范滚动当第一个错误项 boolean - true field-map-to-time 用于将表单内时间区域的应设成 2 个字段,见下方说明 - - fiexd-error-message 是否固定验证失败消息在右下角 boolean - false remote-field 是否远程加载 field，如果远程加载 field 需要设置为 true boolean - false
支持 el-form 的所有属性
代码片段来源 Vben Admin
将表单内时间区域的值映射成 2 个字段
如果表单内有时间区间组件，获取到的值是一个数组，但是往往我们传递到后台需要是 2 个字段
Name Description Type Options Default prop 表单域 字段， 在使用 validate、resetFields 方法的情况下，该属性是必填的 string - - label 标签 string - - component 当前项对应的组件，可以直接传入局部组件，支持 Form 表单组件 - - props 传递的对应的组件的参数 object - - show 是否显示该项 boolean TRUE if-show 动态控制是否显示项。返回 true 渲染，false 不渲染 - - if-disabled 动态控制禁用状态 - - if-rules 动态校验规则，返回最新的数组 - - default-value 默认值 - - show-helper 是否显示提示图标，自定义头部插槽的时候无效 boolean - FALSE helper-message 提示内容，为真的时候有效 - - extra-message 给添加额外信息和帮助信息 string - - group 分组，请参考group属性 object - - span 栅格占据的列数。的属性，每个 item 就是一个 number - 24 offset 栅格左侧的间隔格数。的属性，每个 item 就是一个 number - 0 push 栅格向右
移动格数。的属性，每个 item 就是一个 number - 0 pull 栅格向左移动格数。的属性，每个 item 就是一个 number - 0 xs 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 - - sm 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 - - md 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 - - lg 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 - - xl 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 - - customClass 自定义样式 - -
Name Description Type Options Default card 是否卡片模式， 块状模式 boolean - false title 标题 string - - border 是否显示边框，只在卡片模式下生效 boolean - false shawod 是否显示阴影，只在卡片模式下生效 boolean - false className 样式类名 string - - ifShow 动态显示组，不配置或者函数返回的时候才显示 - - children 分组下的属性 array - []
分组不支持嵌套，可查看分组示例
该表单项栅格系统默认为：
Name Description Type Options Default submit 是否显示 submit 按钮 boolean - true submitText submit 按钮显示的文字 string - 提交 submitProps submit 按钮的配置，参考 el-button object - reset 是否显示 reset 按钮 boolean - true resetText 是否显示 reset 按钮显示的文字 string - 重置 resetProps reset 按钮的配置，参考 el-button object - - align 对齐方式 string - span 栅格占据的列数。的属性，每个 item 就是一个 number - 24 offset 栅格左侧的间隔格数。的属性，每个 item 就是一个 number - 0 push 栅格向右移动格数。的属性，每个 item 就是一个 number - 0 pull 栅格向左移动格数。的属性，每个 item 就是一个 number - 0 xs 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 number / object - - sm 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 number / object - - md 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 number / object - - lg 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 number / object - - xl 响应式栅格数或者栅格属性对象。的属性，每个 item 就是一个 number / object - -
Name Description Parameters submit submit 被点击后触发，使用函数来关闭状态 done, isValid, invalidFields reset reset 按钮被点击后触发 - nextDone 回车跳转到下一个元素开启后，最后一个元素回车后回调事件 - validate 任一表单项被校验后触发 被校验的表单项 prop 值, isValid, invalidFields
Name Description Parameters submitForm 手工调用提交表单事件 resetForm 清空表单所有数据，除非在 field 字段设置了默认值（defaultValue） getDefaultValues 获取 field 设置了默认值（defaultValue）的数据 setErrors 设置表单错误信息 resetEnterNextEvent 重置回车下一个元素下标。在你有动态 item 的时候可以使用它来重置回车顺序
Name Description - 按钮节点之前的内容 form-before 字段开始之前的内容 form-after 按钮节点之后的内容 action-before 在重置按钮之前的内容 action-after 在提交按钮之后的内容，如果开启更多按钮则在更多按钮前面 [prop] 当前这项的 Form Item 的内容，参数为 [prop]-label 当前这项的标签文本的内容，参数为 [prop]-error 当前这项的自定义表单校验信息的显示方式，参数为
对 ElTable 的增强
当 让用户可以自定义列的顺序，宽度等。当用户保存自己的自定义列的时候会回调 函数，它会返回两个参数，一个是修改后的列内容另一个 函数，处理完用户保存的列后需要调用这个函数来关闭窗口
当传入 数据时，将自动显示分页。可以通过 绑定当前页数、通过 绑定每页显示条目个数
- 通过 对操作列进行配置，支持 [columns](#columns 的参数) 的属性
- 可以通过 插槽定制显示操作按钮内容，或者通过 数组来维护你的按钮。推荐使用后者
- 如果你是通过 数组来维护操作按钮，那么它支持以下这些东西
- 设置 属性来控制显示的按钮，多余的按钮会收缩到里面。
- 设置 来控制 的形态，它默认是
- 设置 来控制你的按钮颜色，支持 。注意它只在 的时候有效
- 设置 来设置你的按钮图标，使按钮更加形象
- 设置 来控制你的按钮是否显示，或者 函数动态控制，它的优先级高于 属性
详细配置可展开代码，示例功能包含如下：
- 一个列显示多级数据，中间为空的时候会空行占位
- 显示 tag 标签， tagType 可以参考 NTag
- 自定义颜色和表头显示提示语
- 显示复制按钮
- 使用字符串函数渲染
- 图片列
Name Description Type Options Default data 显示的数据 array - - columns 自动生成表单的参数，参考下面 columns array - - selection 显示多选框，支持 的属性 boolean / object - false index 显示索引，支持 的属性 boolean / object - false expand 开启展开插槽，支持 的属性 boolean / object - false action-props 操作列属性配置，参考：el-table-column 属性 object - - actions 操作列每一行业务按钮配置，参考下面 actions 的配置 array - - action-limit 数据行操作按钮最多显示多少个按钮，多余的放到更多下拉按钮中。0 全部显示不放更多里面 number - 0 show-config 是否显示自定义列 boolean - false loading 是否显示 loading boolean - false total 总条目数 number - - current-page 当前页数，可以通过 绑定值 number - - page-size 每页显示条目个数，可以通过 绑定值 number - - pagination pagination 的配置，同 el-pagination object - 从全局配置中获取 show-overflow-tooltip 当内容过长被隐藏时显示 tooltip boolean - true highlight-current-row 是否要高亮当前行 boolean - true contextmenu 是否通过右键菜单显示操作按钮 boolean - false
支持 表格属性
Name Description Type Options Default prop 对应 的字段名。支持获取路径相应的值。支持多字段取值，通过换行形式显示 - - label 列头文本，传入数组换行显示 - - render 自定义渲染内容。支持字符串函数，参数：
row: 行数据，h：渲染函数需要返回这个对象，index：下标 Function(row,index):VNode - - 是否显示提示图标，自定义头部插槽的时候无效 boolean - false 提示内容，为真的时候有效 - - 是否显示拷贝图标 boolean - false 日期格式化，如果为 true 按格式化时间。不为空的时候则根据其值格式化时间。参考：dayjs 格式化 - - 是否枚举类型。如果为格式必须是对象，并且必须包含字段 boolean - false 枚举 label 字段名称 string - desc 枚举状态类型字段名称。值内容参考组件。如果并且该字段不是空的时候显示组件，类型就是的值。适用于数据状态 string - tagType image 是否显示图片组件 boolean - true 图片样式 - 预览图片路径集合的属性 string - - show 是否显示列 boolean - true color 16 进制文本颜色 string - - ifColor 动态返回 16 进制文本颜色 - -
除 属性不支持之外，支持全部 表格列属性
Name Description Type Options Default type 按钮类型 string - show 是否显示按钮 boolean - true if-show 动态控制是否显示按钮 function(row):boolean - - text 是否为文字按钮 boolean - true bg 是否显示文字按钮背景颜色 boolean - false label 按钮文字 string - - icon 按钮图标，需要支持的图标 Component - - class-name 按钮类样式 string - - click 点击事件 function(row):void - -
Name Description Parameters size-change pageSize 改变时会触发 每页条数 current-change currentPage 改变时会触发 当前页 prev-click 用户点击上一页按钮改变当前页后触发 当前页 next-click 用户点击下一页按钮改变当前页后触发 当前页 column-change 用户点击保存自定义列的时候触发，其中 函数可以关闭 状态和弹窗，如果传入 只关闭 ，不关闭弹窗。拿到 属性之后你需要重置旧的属性值以达到改变列的状态
el-table 事件
Name Description Parameters clearSelection 用于多选表格，清空用户的
选择 — toggleRowSelection 用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） row, selected toggleAllSelection 用于多选表格，切换全选和全不选 — toggleRowExpansion 用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠。 row, expanded setCurrentRow 用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。 row clearSort 用于清空排序条件，数据会恢复成未排序的状态 — clearFilter 传入由 组成的数组以清除指定列的过滤条件。 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态 columnKeys doLayout 对 Table 进行重新布局。 当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 — sort 手动对 Table 进行排序。 参数 属性指定排序列， 指定排序顺序。 prop: string, order: string
el-table 方法
name Description action-column 表格右侧自定义按钮，参数为 expand 当前这列展开显示的内容，参数为 append 插入至表格最后一行之后的内容 pagination 分页栏左侧内容 [prop]-column 当前这列的内容，参数为 [prop]-header 当前这列表头的内容，参数为
Name Description Parameters resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 - clearSelection 用于多选表格，清空用户的选择 — toggleRowSelection 用于多选表格，切换某一行的选中状态， 如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） row, selected toggleAllSelection 用于多选表格，切换全选和全不选 — toggleRowExpansion 用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠。 row, expanded setCurrentRow 用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。 row clearSort 用于清空排序条件，数据会恢复成未排序的状态 — clearFilter 传入由 组成的数组以清除指定列的过滤条件。 不传入参数时用于清空所有过滤条件，数据会恢复成未过滤的状态 columnKeys doLayout 对 Table 进行重新布局。 当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 — sort 手动对 Table 进行排序。 参数 属性指定排序列， 指定排序顺序。 prop: string, order: string doQuery 手动触发事件 -
Name Description Type Options Default prop 字段名称 string - - label 文本名称 string - - span 列的数量 number - 1 width 列的宽度，不同行相同列的宽度按最大值设定（如无 ，宽度包含标签与内容） - - min-width 列的最小宽度，与 的区别是 是固定的， 会把剩余宽度按比例分配给设置了 的列（如无 ，宽度包含标签与内容） - - align 列的内容对齐方式（如无 ，对标签和内容均生效） string label-align 列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 ，请使用 参数） string - class-name 列的内容自定义类名 string - - label-class-name 标签自定义类名 string - - color 列的内容字体 16 进制颜色 string - - label-color 标签字体 16 进制颜色 string - - tag-type-name 设置内容为 tab 样式。取值中的 type 属性 string - - time-format 时间格式化格式，不为空的时候客户化。如果为，则格式化为 string boolean - show-helper 标签旁边是否显示提示图标 boolean - false helper-message 提示内容 `string string[]` - show-copy 列内容是否可以拷贝 boolean - false if-show 动态控制该是否显示 - - render 动态渲染 `(val: string, data: any) => string VNode VNode [] ` image 显示图片的图片地址 string - - image-width 图片宽度 string - image-height 图片高度 string - image-fit 图片展示样式 string `'fill' 'contain' image-src-list-prop 预览图片 url 集合字段属性名称 string - -
Name Description Type Options Default model-value / v-model 选中项绑定值 date(DateTimePicker) / array(DateTimeRangePicker) - - show-fast 是否显示快捷操作栏 boolean - false max 最大可选天数, 0 表示最大可选到当天, -1 不限制。仅在的时候生效 number - 0 min 最小可选天数, 0 表示不限制。仅在的时候生效 number - 0 default-range 默认范围时间，0 不默认。单位天。设置 7 表示当前时间之前的第 7 天到现在的时间段。 number - 0 value-format 可选，绑定值的格式。 默认时间戳格式 string - X readonly 只读 boolean — false disabled 禁用 boolean — false size 输入框尺寸 string large/medium/small/mini large editable 文本框可输入 boolean — true clearable 是否显示清除按钮 boolean — true placeholder 非范围选择时的占位内容 string — — start-placeholder 范围选择时开始日期的占位内容 string — — end-placeholder 范围选择时结束日期的占位内容 string — — type 显示类型 string year/month/date/dates/datetime/ week/datetimerange/daterange/ monthrange date format 显示在输入框中的格式 string 请查看 date formats YYYY-MM-DD popper-class DatePicker 下拉框的类名 string — — range-separator 选择范围时的分隔符 string — '-' default-value 可选，选择器打开时默认显示的时间 Date anything accepted by — default-time 范围选择时选中日期所使用的当日内具体时刻 Date[] 长度为 2 的数组，每一项都是 Date 对象。 第一项是起始日期，第二项是终止日期 — value-format 可选，绑定值的格式。 不指定则绑定值为 Date 对象 string 请查阅 date formats — name 原生属性 string — — unlink-panels 在范围选择器里取消两个日期面板之间的联动 boolean — false prefix-icon 自定义前缀图标 string / Component — Date clear-icon 清楚日期图标 string / Component — CircleClose validate-event 输入时是否触发表单的校验 boolean - true disabledDate 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数 ，应该返回一个 Boolean 值 Should return a Boolean function — — shortcuts 设置快捷选项，需要传入数组对象 object[{ text: string, value: date / function }] — — 到此这篇treesoft官网（tree studio）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/54965.html