❤
npm
Sign UpSign In

tq-el-form

1.1.3 • Public • Published

tq-el-form

快速引入

注：只适用简单快速生成表单，暂不支持定制化功能

返回目录

  npm i tq-el-form

(全局引入)
main.js
  import tqElForm from "tq-el-form"
  Vue.use(tqElForm)

  <tq-el-form
    ref="tq_form"
    :colCount="4"
    :formData="formData"
    :formArr="formArr"
    :parameterObj="parameterObj"
  >
    <template slot-scope="obj" slot="aa">
      {{ obj }}
    </template>
  </tq-el-form>

  const formData = {
    title: "",
    userArr: "",
    rate: 0
  }
  const formArr = [{
    title: "这是标题",
    prop: "title",
    label: "标题",
    validator: "commonValid",
    reg: "phone",
    noStar: true
  },
  {
    prop: "date",
    label: "日期",
    type: "date",
    great: "now",
  },
  {
    prop: "date1",
    label: "日期1",
    type: "date",
  },
  {
    prop: "num1",
    label: "数字1",
    validator: "fieldsValid",
    fields: [
      {
        opr: "大于",
        prop: "num2",
        label: "数字2"
      }
    ]
  },
  {
    prop: "num2",
    label: "数字2",
    noStar: true,
  },
  {
    prop: "userArr",
    label: "用户",
    type: "select",
    // selectIndex: 0,
  },
  {
    prop: "rate",
    label: "评分",
    type: "rate",
  },
  {
    prop: "switch",
    label: "开关",
    type: "switch",
  },
  {
    prop: "slot",
    label: "插槽",
    type: "slot",
    slotName:"aa"
  },
  {
    prop: "checkbox",
    label: "复选框",
    type: "checkbox",
    checkboxArr: [
      {
        value: "11",
        label: "11"
      },
      {
        value: "22",
        label: "22"
      }
    ]
  },
  {
    prop: "radio",
    label: "单选框",
    type: "radio",
    radioArr: [
      {
        value: "11",
        label: "11"
      },
      {
        value: "22",
        label: "22"
      }
    ]
  }
  ];
  const parameterObj = {
    userArr: [
      {
        label: "用户1",
        value: "用户1",
      },
      {
        label: "用户2",
        value: "用户2",
      },
    ],
  }
绑定值 含义 是否必填 类型 默认值
formArr 表格数组 Y Array
formData 表格绑定值 N Object
parameterObj 枚举列表 N Object
size 同 elementUI el-table size N string medium
labelWidth 同 elementUI el-table label-width N string
gutter 同 elementUI el-row gutter N number 20
colCount 总共分几列 N number 4
type 类型 类型列表 N string

类型列表

类型值 类型
date 日期
select select 下拉
rate 评分
switch switch 开关
checkbox checkbox 复选框
radio radio 单选框
slot slot 插槽 
  let parameterObj = {
    [formArr[i].prop]:[
      {
        value:"",
        label:"",
      }
    ]
  }

方法

返回目录

方法名 作用 参数
init 初始化表单（this.$refs.form.init()）
get_data_by_prop 外部根据 key 获取值 key 为对应字段的 prop
get_data_by_props 外部根据 [key1,key2,...] 获取值 key 为对应字段的 prop
set_data_by_props 外部根据 {key:value} 设置值 key 为对应字段的 prop,value 为要设置的值
reset_form 还原表单数据（所有数据变回原本值(绑定的 formData 原值)）
clear_form 清空表单数据（所有数据置空）
- - -
emit_focus 事件-聚焦 返回对应项 {prop:"",label:"",...}
emit_btn 事件-按钮点击 返回对应项
emit_change 事件-改变 返回对应项
emit_input 事件-改变（input 标签的 input 事件） 返回对应项
emit_removeTag 事件-tag 移除 返回对应项
check_change 事件-校验当前表单是否修改 返回发生修改的数组(oldValue:原值，newValue:新值)
get_data 事件-获取表单数据（附带校验） 返回 回调函数 （form:object,formChangeObj:object）

通用参数

返回目录

绑定值 含义 是否必填 类型 默认值
prop 绑定的值 Y string
label 显示名 Y string
span 占几列 N number 4
noStar 是否显示表单校验星号(设置校验时可不展示星号,例如：空不校验，非空校验) N boolean false
validator 开启校验 N string commonValid (passValid(二次确认密码的校验，fieldsValid（多字段联合校验）))
reg 校验时正则表达式 N string 正则校验列表
regCustom 自定义正则 N string
regCustomName 自定义正则报错提示 N string 请正确输入 xxx

model 模式设置

返回目录

模式 类型
add 添加模式
edit 编辑模式
see 查看模式
addHas 添加模式
editHas 编辑模式
seeHas 查看模式

modelConfig 模式设置

返回目录

模式 参数 效果
model readonly/disabled 设置表单禁用类型 readonly 只读,disabled 置灰不可编辑
add "prop,prop,..." 添加模式 prop 为 formArr 每项对应的 prop
edit "prop,prop,..." 编辑模式 ...
see "prop,prop,..." 查看模式 (see:"" 不设置值时，默认禁止全部)
addHas "prop,prop,..." 添加模式 当有值时才触发 禁止修改
editHas "prop,prop,..." 编辑模式 ...
seeHas "prop,prop,..." 查看模式 ...

模式 示例

返回目录

// 添加是title是禁用
<tq-el-form
  ref="tq_form"
  :colCount="4"
  :formArr="formArr"
  :formData="formData"
  :model="model"
  :modelConfig="modelConfig"
  :parameterObj="parameterObj"
></tq-el-form>

 data() {
    return {
      formData: [],
      formArr: [
        {
          prop: "title",
          label: "标题",
        },
      ],
      parameterObj: [],
      model: "add",
      modelConfig: {
        model: "disabled",
        add: "title",
      },
    };
  },

正则校验列表

返回目录

  • 作用 校验数字
    • 正则名 digit
    • 正则 /^[0-9]*$/
  • 邮箱
    • email
    • /^[A-Za-z\d]+([-_.][a-za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,5}$/
  • 电话号
    • phone
    • /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/
  • 汉字
    • chineseCharacter
    • /^[\u4e00-\u9fa5]{0,}$/
  • IP
    • ip
    • /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]).(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
  • 域名
    • domain
    • /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/
  • http

多字段大小联合校验

返回目录

  {
    prop: "num1",
    label: "数字1",
    validator: "fieldsValid",
    // 多字段校验
    // 会自动把对应字段取反 例如:目前只设置了 num1 大于 num2   内部会自动生成num2 小于等于 num1
    fields: [
      {
        // opr [大于|大于等于|等于|不等于|小于等于|等于]
        opr: "大于",
        // 其他字段的prop
        prop: "num2",
        // 报错后的提示 模板 `${num1} ${opr} ${label} `
        label: "数字2"
      }
    ]
  },
  {
    prop: "num2",
    label: "数字2",
    noStar: true,
  },

日期选择器

返回目录

绑定值 含义 对应 elementUI 的 key 是否必填 类型 默认值
prop 绑定的值 prop Y string
label 显示名 label Y string
span 占几列 N number 4
placeholder 占位符 placeholder N boolean
clearable 是否可清空 clearable N boolean false
dateType 日期组件的类型 type N string datetime
valueFormat 绑定值的格式。 value-format N string
format 显示在输入框中的格式 format N string
great 大于对应日期（变灰） N string
less 小于于对应日期（变灰） N string

日期选择器示例

返回目录

  let formArr = [
    {
      // v-model绑定的值
      prop: "date",
      // el-form-item label绑定值
      label: "日期",
      // 格式类型
      type: "date",
      // great-大于  less-小于
      // now 当前时间
      // [prop] 其他字段的prop值 例 greate:endTime
      great: "now",
    },
    {
      prop: "endTime",
      label: "结束时间"
    }
  ]

select 下拉选择器

返回目录

绑定值 含义 对应 elementUI 的 key 是否必填 类型 默认值
prop 绑定的值 prop Y string
label 显示名 label Y string
span 占几列 N number 4
placeholder 占位符 placeholder N boolean
clearable 是否可清空 clearable N boolean false
multiple 多选 multiple N boolean false
collapse 折叠多选 collapse-tags N boolean false

input 输入框

返回目录

绑定值 含义 对应 elementUI 的 key 是否必填 类型 默认值
prop 绑定的值 prop Y string
label 显示名 label Y string
span 占几列 N number 4
placeholder 占位符 placeholder N boolean

checkbox 示例

返回目录

绑定值 含义 对应 elementUI 的 key 是否必填 类型 默认值
prop 绑定的值 prop Y string
label 显示名 label Y string
span 占几列 N number 4
min 最少选几个 min N number
max 最多几个 max N number
checkboxArr checkbox 数组 Y array 
const formArr = [
  {
    prop: "checkbox",
    label: "复选框",
    type: "checkbox",
    // 复选框的数组
    checkboxArr: [
      {
        // 复选框绑定的值
        value: "11",
        // 复选框显示的值
        label: "1",
      },
      {
        value: "22",
        label: "2",
      },
    ],
  },
];

radio 示例

返回目录

绑定值 含义 对应 elementUI 的 key 是否必填 类型 默认值
prop 绑定的值 prop Y string
label 显示名 label Y string
span 占几列 N number 4
radioArr radio 数组 Y array 
const formArr = [
  {
    prop: "radio",
    label: "单选框",
    type: "radio",
    // 单选框的数组
    radioArr: [
      {
        // 单选框绑定的值
        value: "11",
        // 单选框显示的值
        label: "1",
      },
      {
        value: "22",
        label: "2",
      },
    ],
  },
];

slot 插槽

返回目录

绑定值 含义 对应 elementUI 的 key 是否必填 类型 默认值
prop 绑定的值 prop Y string
label 显示名 label Y string
span 占几列 N number 4
slotName 插槽名 N string 
const formArr = [
  {
    prop: "slot",
    label: "插槽",
    type: "slot",
    slotName: "aa",
  },
];

// obj.form 表单数据
// obj.item 当前行数据
 <tq-el-form
  ref="tq_form"
  :colCount="4"
  :formArr="formArr"
>
  <template slot-scope="obj" slot="aa">
    {{ obj.form }}
    {{ obj.item }}
  </template>
  </tq-el-form>

Dependencies (4)

Dev Dependencies (13)

Package Sidebar

Install

npm i tq-el-form

Repository

gitee.com/tqll123/tq-vue-com.git

Weekly Downloads

2

Version

1.1.3

License

MIT

Unpacked Size

51.9 kB

Total Files

20

Last publish

Collaborators

  • tq_npm
Try on RunKit
Report malware