JgEditableTable 帮助文档

JgEditableTable 帮助文档

参数配置

参数类型必填说明
columnsarray✔️表格列的配置描述，具体项见下表
dataSourcearray✔️表格数据
loadingboolean是否正在加载，加载中不会显示任何行
actionButtonboolean是否显示操作按钮，包括"新增"、"删除"
rowNumberboolean是否显示行号
rowSelectionboolean是否可选择行

columns 参数详解

参数类型必填说明
titlestring✔️表格列头显示的问题
keystring✔️列数据在数据项中对应的 key，必须是唯一的
typestring✔️表单的类型，可以通过JgEditableTableUtil.Types赋值
widthstring列的宽度，可以是百分比，也可以是px或其他单位，建议设置为百分比，且每一列的宽度加起来不应超过100%，否则可能会不能达到预期的效果
placeholderstring表单预期值的提示信息，可以使用${…}变量替换文本（使用方式见下方）
defaultValuestring默认值，在新增一行时生效
validateRulesarray表单验证规则，配置方式见下表

当 type=checkbox 时所需的参数

参数类型必填说明
defaultCheckedboolean默认值是否选中
customValuearray自定义值，checkbox需要的是boolean值，如果数据是其他值（例如'Y' or 'N'）时，就会导致错误，所以提供了该属性进行转换，例：customValue: ['Y','N']，会将true转换为'Y'，false转换为'N'，反之亦然

当 type=select 时所需的参数

参数类型必填说明
optionsarray✔️下拉选项列表，详见下表
options 所需参数
参数类型必填说明
titlestring✔️显示标题
valuestring✔️真实值

validateRules 配置规则

validateRules 需要的是一个数组，数组里每项都是一个规则，规则是object类型，规则的各个参数如下

  • required 是否必填，可选值为trueorfalse
  • pattern 正则表达式验证，只有成功匹配该正则的值才能成功通过验证
  • message 当验证未通过时显示的提示文本，可以使用${…}变量替换文本（使用方式见下方）
  • 点我查看示例

${…} 变量使用方式

在placeholder和message这两个属性中可以使用${…}变量来替换文本在示例二中，配置了title为字段名称的一列，而placeholder配置成了请输入${title}，那么最终显示效果为请输入字段名称这就是${…}变量的使用方式，在${}中可以使用的变量有title、key、defaultValue这三个属性的值

FAQ

如何获取表单的值？

在示例一中，设定了一个 ref="editableTable" 的属性，那么在vue中就可以使用this.$refs.editableTable获取到该表格的实例，并调取其中的方法，在示例三中就是以这种做法获取到的值

如何进行表单验证？

在获取值的时候默认会进行表单验证操作，用户在输入的时候也会对正在输入的表单进行验证，只要配置好规则就可以了

如何添加或删除一行？

该功能已封装到组件中，你只需要将 actionButton 设置为 true 即可

示例一

  1. <jg-editable-table
  2.     ref="editableTable"
  3.     :loading="loading"
  4.     :columns="columns"
  5.     :dataSource="dataSource"
  6.     :rowNumber="true"
  7.     :rowSelection="true"
  8.     :actionButton="true"
  9.     style="margin-top: 8px;"
  10.     @selectRowChange="handleSelectRowChange"/>

示例二

  1. columns:[
  2.     {
  3.         title: '字段名称',
  4.         key: 'fieldName',
  5.         type: Types.input,
  6.         placeholder: '请输入${title}',
  7.         defaultValue: '称名段字',
  8.         // 表单验证规则
  9.         validateRules: [
  10.             {
  11.                 required: true, // 必填
  12.                 message: '请输入${title}' // 提示的文本
  13.             },
  14.             {
  15.                 pattern: /^[a-z|A-Z][a-z|A-Z\d_-]{0,}$/, // 正则
  16.                 message: '${title}必须以字母开头，可包含数字、下划线、横杠'
  17.             }
  18.         ]
  19.     }
  20. ]

示例三

  1. // 获取被逻辑删除的字段id
  2. let deleteIds = this.$refs.editableTable.getDeleteIds();
  3. // 获取所有表单的值，并进行验证
  4. this.$refs.editableTable.getValues((error, values) => {
  5.     // 错误数 = 0 则代表验证通过
  6.     if (error === 0) {
  7.         this.$message.success('验证通过')
  8.         // 将通过后的数组提交到后台或自行进行其他处理
  9.         console.log(deleteIds, values)
  10.     } else {
  11.         this.$message.error('验证未通过')
  12.     }
  13. })