当前位置: 首页>前端>正文

使用element封装表格公共组件 element form表单封装

欢迎使用tmt-form

简介

本插件基于Element进行二次封装form表单,只需简单的配置一下,就可以生成一个form表单,省去写html的时间

安装方式

1、npm install tmt-form
2、在main.js全局引入:
   import Vue from 'vue'
   import tmtForm from 'tmt-form';
   Vue.use(tmtForm)

示例

效果:

使用element封装表格公共组件 element form表单封装,使用element封装表格公共组件 element form表单封装_html5,第1张

HTML:

<tmt-form
      ref="tmtForm"
      @submit="submit"
      label-width="auto"
      :fields="formSet"
      label-suffix=":"
      :status-icon="true"
    >
    </tmt-form>

JS:

export default {
  name: "App",
  data() {
    return {
      password: "",
      sexArr: [
        { label: "男", value: 1 },
        { label: "女", value: 2 },
      ],
      cityArr: [
        { label: "厦门市", value: 1 },
        { label: "漳州市", value: 2 },
      ],
      groupCity: [
        {
          label: "热门城市",
          options: [
            { label: "北京市", value: 1 },
            { label: "厦门市", value: 2 },
          ],
        },
        {
          label: "城市名",
          options: [
            { label: "上海市", value: 3 },
            { label: "南充市", value: 4 },
          ],

      ],
      selectLoading: false,
    };
  },
  created() {
    this.$nextTick(() => {
      let tmtForm = this.$refs.tmtForm;
      tmtForm.setField("username", 123);
    });
  },
  computed: {
    formSet() {
      let self = this;
      return [
        {
          formType: "tmtText",
          name: "username",
          label: "用户名",
          defaultValue: "西红柿炒番茄",
          elProps: {
            "prefix-icon": "el-icon-user-solid",
          },
          validate: [
            { required: true, message: "用户名不能为空", trigger: "blur" },
          ],
        },
        {
          formType: "tmtText",
          name: "password",
          label: "密码",
          defaultValue: "123123",
          elProps: {
            type: "password",
          },
          filedChange(val) {
            console.log(val);
            self.password = val;
          },
          validate: [
            { required: true, message: "密码不能为空", trigger: "blur" },
          ],
        },
        {
          formType: "tmtText",
          name: "password2",
          label: "确认密码",
          defaultValue: "123123",
          elProps: {
            type: "password",
          },
          validate: [
            { required: true, message: "用户名不能为空", trigger: "blur" },
            {
              validator(rule, value, callback) {
                if (value != self.password) {
                  callback(new Error("两次密码不一致"));
                } else {
                  callback(); // 验证通过必须调用回调
                }
              },
              trigger: "blur",
            },
          ],
        },
        {
          formType: "tmtText",
          name: "instr",
          label: "简介",
          defaultValue:'CTR+C,CTR+V工程师',
          elProps: {
            type: "textarea",
            autosize: { minRows: 2, maxRows: 16 },
          },
        },
        {
          formType: "tmtText",
          name: "numberInput",
          label: "数字输入",
          elProps: {
            type: "number",
            step: 3,
          },
        },
        {
          formType: "tmtUpload",
          name: "file",
          label: "图片上传",
          elProps: {
            fileList: [
              {
                name: "food.jpeg",
                url:
                  "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
              },
              {
                name: "food2.jpeg",
                url:
                  "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
              },
            ],
          },
        },
        {
          formType: "tmtSelect",
          name: "groupSelect",
          label: "分组选择",
          defaultValue: 1,
          elProps: {
            options: self.groupCity,
            group: true,
          },
        },
        {
          formType: "tmtSelect",
          name: "diySelect",
          label: "自定义远程搜索",
          defaultValue: [1],
          elProps: {
            placeholder: "请选择",
            options: self.cityArr,
            loading: self.selectLoading,
            filterable: true,
            remote: true,
            diyRender: true,
            multiple: true,
            clearable: true,
            "allow-create": true,
            "default-first-option": true,
            render: function (row) {
              return (
                <div>
                  <span>{row.label}</span>
                  <span>{"-------->"}</span>
                  <span>{row.value}</span>
                </div>
              );
            },
            removeTag: function () {
              console.log("标签移除");
            },
            focus: function () {
              console.log("获取焦点");
            },
            change: function (val) {
              console.log("选中值发生改变", val);
            },
            blur: function () {
              console.log("失去焦点");
            },
            visibleChange: function () {
              console.log("下拉框显示隐藏");
            },
            clear: function () {
              console.log("清空选项");
            },
            "remote-method": function (query) {
              console.log(query);
              self.selectLoading = true;
              setTimeout(() => {
                self.selectLoading = false;
                self.cityArr = [
                  { label: "南充市", value: 3 },
                  { label: "成都", value: 4 },
                ];
              }, 1500);
            },
          },
        },
        {
          formType: "tmtRate",
          name: "rate",
          label: "评分",
          defaultValue: 4,
          elProps: {
            "show-score": true,
            "text-color": "#ff9900",
            "show-text": true,
          },
        },
        {
          defaultValue: "#000",
          formType: "tmtColorPicker",
          name: "color",
          label: "颜色选择",
        },
        {
          formType: "tmtRadio",
          name: "sex",
          label: "性别",
          defaultValue:1,
          elProps: {
            fill: "#ff00ff",
            "text-color": "#000000",
            options: [
              {
                label: "男",
                value: 1,
                attrs: {
                  border: true,
                },
              },
              { label: "女", value: 2 },
            ],
          },
        },
        {
          formType: "tmtSwitch",
          name: "switch",
          label: "开关",
          elProps: {
            change: function (val) {
              console.log("开关值改变", val);
            },
          },
        },
        {
          formType: "tmtCheckBox",
          name: "checkbox",
          label: "复选框",
          defaultValue:[2],
          elProps: {
            // checkBoxType: "button",
            fill:'#000',
            options: [
              {
                label: "复选框1",
                value: 1,
                attrs: {
                  disabled: true,
                },
              },
              {
                label: "复选框2",
                value: 2,
                attrs: {
                  // "true-label": "选中复选框",
                },
              },
              {
                label: "带边框复选框3",
                value: 3,
                attrs: {
                  border: true,
                },
              },
              {
                label: "默认选中5",
                value: 5,
                attrs: {
                  checked: true,
                },
              },
            ],
          },
        },
        {
          formType: "tmtTimePicker",
          name: "timePicker1",
          label: "时间选择",
          defaultValue:[new Date(2021, 1, 25, 8, 40,30), new Date(2021, 1, 25, 9, 40,30)],
          elProps: {
            timeType:'timePicker',
            placeholder: "请选择时间",
            editable:false,
            size:'mini',
            'is-range':true,
            'start-placeholder':'开始时间',
            'end-placeholder':'结束时间',
            'arrow-control':true,
            'range-separator':'~',
            "picker-options": {
              selectableRange: "18:29:00 - 20:30:00",
              format: 'hh:mm:ss'
            },
          },
        },
        {
          formType: "tmtTimePicker",
          defaultValue:'10:20',
          name: "timePicker2",
          label: "时间选择",
          elProps: {
            timeType: "timeSelect",
            placeholder: "请选择时间",
            "picker-options": {
              start: '10:00',
              end: '11:00',
              step: '00:01'
            },
          },
        },
        {
          formType:'tmtDate',
          name:'date',
          label:"日期选择带禁用",
          defaultValue:new Date(),
          elProps:{
            placeholder:'请选择日期',
            'value-format':'yyyy-MM-dd',
            'picker-options':{
              disabledDate(time){
                //禁选大于今天的日期
                return time>new Date()
              }
            }
          }
        },
        {
          formType:'tmtDate',
          name:'daterange',
          label:"日期选择带快捷项",
          defaultValue:'2020-01-01',
          elProps:{
            'unlink-panels':true,
            type:'daterange',
            'picker-options':{
              firstDayOfWeek:1,
              shortcuts:[
                {
                  text:'本月',
                  onClick(picker) {
                    let start = new Date()
                    picker.$emit('pick', [new Date(start.getFullYear(),start.getMonth(),1), new Date(start.getFullYear(),start.getMonth()+1,0)]);
                  }
                },
                {
                  text:'上个月',
                  onClick(picker) {
                    let start = new Date()
                    picker.$emit('pick', [new Date(start.getFullYear(),start.getMonth()-1,1), new Date(start.getFullYear(),start.getMonth(),0)]);
                  }
                },
              ],
              onPick({ maxDate, minDate }){
                console.log(maxDate,minDate)
              }
            },
            'start-placeholder':'起始时间',
            'end-placeholder':'结束时间',
            'value-format':'yyyy-MM-dd'
          }
        },
        {
          formType:'tmtDate',
          name:'week',
          label:"周选择",
          elProps:{
            type:'week',
            size:'small',
            placeholder:'请选择日期',
            format:"yyyy 第 WW 周",
            'value-format':'yyyy-MM-dd'
          },
          filedChange(val){
            console.log('filedChange',val)
          }
        },
        {
          formType:'tmtDate',
          name:'datetime',
          label:'日期时间选择',
          defaultValue:new Date(),
          elProps:{
            type:'datetime',
            placeholder:'日期时间选择'
          }
        },
        {
          formType:'tmtDate',
          name:'datetimerange',
          label:'范围性日期时间',
          defaultValue:['2020-12-31 10:30:30','2021-01-29 16:58:30'],
          elProps:{
            'start-placeholder':'起始日期时间',
            'end-placeholder':'终止日期时间',
            type:'datetimerange',
            'value-format':'yyyy-MM-dd HH:mm:ss',
            placeholder:'日期时间选择'
          }
        },
        {
          formType:'tmtDate',
          name:'dates',
          label:"多个日期选择",
          elProps:{
            placeholder:'请选择日期',
            type:'dates',
            size:'mini',
          }
        },
        {
          formType: "tmtSilder",
          name: "slider",
          label: "滑块",
          defaultValue: 27,
          elProps: {
            "show-input": true,
            "show-input-controls": true,
            "input-size": "mini",
          },
        },
        {
          formType: "tmtSilder",
          name: "sliderRange",
          label: "范围性滑块",
          defaultValue: [23,30],
          elProps: {
            'format-tooltip':function(value){
              return value+'℃'
            },
            "show-input": true,
            'show-stops':true,
            "min":20,
            "max":35,
            marks:{
              20:'20℃',
              25:'25℃',
              30:{
                style:{
                  color:'#f59b78'
                },
                label:this.$createElement('strong','30℃')
              },
              35:{
                style:{
                  color:'red'
                },
                label:this.$createElement('strong','35℃')
              },
            },
            range:true,
            "show-input-controls": true,
            "input-size": "mini",
          },
        },
        {
          formType: "tmtInputNumber",
          name: "number",
          label: "数字输入框",
          elProps: {
            min: -1,
            max: 20,
          },
        },
        {
          formType: "tmtCascader",
          name: "cascader",
          label: "多级联动",
          filedChange(val){
            console.log(val)
          },
          elProps: {
            expandChange:function(){
              console.log('展开节点')
            },
            props:{
              lazy: true,
              lazyLoad (node, resolve) {
                const { value } = node;
                 setTimeout(() => {
                   let nodes = []
                   if(value==1){
                     nodes = [
                       {
                         label:'1-1',
                         value:'1-1',
                         leaf:true,
                         disabled:true
                       },
                     ]
                   }else if(value==2){
                     nodes = [
                       {
                         label:'2-1',
                         value:'2-1',
                         leaf:true
                       },
                       {
                         label:'2-2',
                         value:'2-2',
                         leaf:true
                       },
                     ]
                   }
                  resolve(nodes);
                }, 1000);
              }
            },
            clearable: true,
            options: [
              {
                label: "一级",
                value: 1,
                children:[{
                  label:'选项一',
                  value:'选项一',
                  leaf:true
                }]
              },
              {
                label: "二级",
                value: 2,
                children:[{
                  label:'选项二',
                  value:'选项二',
                  leaf:true
                }]
              },
            ],
          },
        },
      ];
    },
  },
  methods: {
    submit(form) {
      console.log(form);
    },
  },
};

标签属性说明

  • tmt-form

属性

说明

类型

可选值

默认值

inline

行内表单模式

boolean


false

label-position

表单域标签的位置,如果值为 left 或者 right 时,则需要设置label-width

string

right/left/top

right

label-width

表单域标签的宽度,例如 ‘50px’。作为 Form 直接子元素的 form-item 会继承该值。支持 auto。

string



label-suffix

表单域标签的后缀

string



hide-required-asterisk

是否显示必填字段的标签旁边的红色星号

boolean


false

show-message

是否显示校验错误信息

boolean


true

inline-message

是否以行内形式展示校验信息

boolean


false

status-icon

是否在输入框中显示校验结果反馈图标

boolean


false

size

用于控制该表单内组件的尺寸

string

medium / small / mini


disabled

是否禁用该表单内的所有组件。若设置为 true,则表单内组件上的 disabled 属性不再生效

boolean


false

配置说明

大体配置

配置项

说明

类型

formType

对应的组件

String

name

表单提交的字段

String

label

表单选项的表述文字

String

validate

表单校验规则

Array

elProps

添加对应Element组件的属性

Object

filedChange

监听表单内字段值的变化,参数说明:

form 已经填写的表单字段

setFiled 是一个函数,可以更改其他字段的值,例:setFiled(‘username’,‘Jan’)

Function(val,form,setFiled)

细节配置

  • formType 配置表单对应的组件

配置项

说明

tmtText

文本输入框

tmtUpload

文件上传组件

tmtSelect

选择器组件

tmtRadio

单选按钮

tmtSwitch

开关

tmtColorPicker

颜色选择器

tmtColorPicker

颜色选择器

tmtTimePicker

时间选择组件

tmtInputNumber

数字输入框组件

tmtCheckBox

复选框组件

tmtSilder

滑块

tmtCascader

多级联动

  • defaultValue 表单默认值
  • validate 表单校验规则(Array)

配置项

说明

required

是否为必填字段

message

当为必填字段的时候的错误提示

trigger

'blur’当输入框失去焦点时校验

’change’当输入框值改变时校验

validator

函数类型

rule:校验规则

value:输入框的值

callback:函数的回调(填写错误提示,校验正确时,也需要调用一下callback)

参数

说明

类型

可选值

默认值

options

配置项:[ {

    label:(文字),

    value:(选中时的值)

   } ]

Array



disabled

是否禁用

boolean


false

width

switch 的宽度(像素)

number


40

active-icon-class

switch 打开时所显示图标的类名,设置此项会忽略 active-text

string



inactive-icon-class

switch 关闭时所显示图标的类名,设置此项会忽略 inactive-text

string



active-text

switch 打开时的文字描述

string



inactive-text

switch 关闭时的文字描述

string



active-value

switch 打开时的值

boolean / string / number


true

inactive-value

switch 关闭时的值

boolean / string / number


false

active-color

switch 打开时的背景色

string


#409EFF

inactive-color

switch 关闭时的背景色

string


#C0CCDA

name

switch 对应的 name 属性

string



validate-event

改变 switch 状态时是否触发表单的校验

boolean

-

true

示例

validate:[{required:true,message:'输入框值不能为空',trigger: 'blur'},
          {
            validator(rule,value,callback){
              if(value.length<5){
                callback(new Error('不能超过五个字符'))
              }else{
                callback()// 验证通过必须调用回调
              }
            },
            trigger:'blur'
          }
        ]
  • elProps 添加相应组件的Element属性
  • tmtText

属性

说明

类型

可选值

默认值

type

类型

string

text,textarea 和其他 原生 input 的 type 值

text

maxlength

原生属性,最大输入长度

number



minlength

原生属性,最小输入长度

number



show-word-limit

是否显示输入字数统计,只在 type="text"type="textarea" 时有效

boolean


false

placeholder

输入框占位文本

string



clearable

是否可清空

boolean


false

show-password

是否显示切换密码图标

boolean


false

disabled

禁用

boolean


false

size

输入框尺寸,只在 type!=“textarea” 时有效

string

medium/small/mini


prefix-icon

输入框头部图标

string



suffix-icon

输入框尾部图标

string



rows

输入框行数,只对 type=“textarea” 有效

number


2

autosize

自适应内容高度,只对 type=“textarea” 有效,可传入对象,如,{ minRows: 2, maxRows: 6 }

boolean / object


false

autocomplete

原生属性,自动补全

string

on, off

off

readonly

原生属性,是否只读

boolean


false

max

原生属性,设置最大值




min

原生属性,设置最小值




step

原生属性,设置输入字段的合法数字间隔(type=number 时可用)




  • tmtUpload

参数

说明

类型

可选值

默认值

action

必选参数,上传的地址

string



headers

设置上传的请求头部

object



multiple

是否支持多选文件

boolean



data

上传时附带的额外参数

object



name

上传的文件字段名

string


file

with-credentials

支持发送 cookie 凭证信息

boolean


false

show-file-list

是否显示已上传文件列表

boolean


true

drag

是否启用拖拽上传

boolean


false

accept

接受上传的文件类型(thumbnail-mode 模式下此参数无效)

string



on-preview

点击文件列表中已上传的文件时的钩子

function(file)



on-remove

文件列表移除文件时的钩子

function(file, fileList)



on-success

文件上传成功时的钩子

function(response, file, fileList)



on-error

文件上传失败时的钩子

function(err, file, fileList)



on-progress

文件上传时的钩子 function(event, file, fileList)



on-change

文件状态改变时的钩子,添加文件、上传成功和上传失败时都会被调用

function(file, fileList)



before-upload

上传文件之前的钩子,参数为上传的文件,若返回 false 或者返回 Promise 且被 reject,则停止上传。

function(file)



before-remove

删除文件之前的钩子,参数为上传的文件和文件列表,若返回 false 或者返回 Promise 且被 reject,则停止删除。

function(file, fileList)



list-type

文件列表的类型

string

text/picture/picture-card

text

auto-upload

是否在选取文件后立即进行上传

boolean


true

file-list

上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]

array


[]

http-request

覆盖默认的上传行为,可以自定义上传的实现

function



disabled

是否禁用

boolean


false

limit

最大允许上传个数

number



on-exceed

文件超出个数限制时的钩子

function(files, fileList)


-

  • tmtSelect

参数

说明

类型

可选值

默认值

group

是否分组

boolean


false

multiple

是否多选

boolean


false

disabled

是否禁用

boolean


false

value-key

作为 value 唯一标识的键名,绑定值为对象类型时必填

string


value

size

输入框尺寸

string

medium/small/mini


clearable

是否可以清空选项

boolean


false

collapse-tags

多选时是否将选中值按文字的形式展示

boolean


false

multiple-limit

多选时用户最多可以选择的项目数,为 0 则不限制

number


0

name

select input 的 name 属性 string — —

placeholder

占位符

string


请选择

filterable

是否可搜索

boolean


false

allow-create

是否允许用户创建新条目,需配合 filterable 使用

boolean


false

filter-method

自定义搜索方法

function



remote

是否为远程搜索

boolean


false

remote-method

远程搜索方法

function



loading

是否正在从远程获取数据

boolean


false

loading-text

远程加载时显示的文字

string


加载中

no-match-text

搜索条件无匹配时显示的文字,也可以使用slot="empty"设置

string


无匹配数据

no-data-text

选项为空时显示的文字

string


无数据

popper-class

Select

下拉框的类名

string


reserve-keyword

多选且可搜索时,是否在选中一个选项后保留当前的搜索关键词

boolean


false

default-first-option

在输入框按下回车,选择第一个匹配项。需配合 filterable 或 remote 使用

boolean

-

false

popper-append-to-body

是否将弹出框插入至 body 元素。在弹出框的定位出现问题时,可将该属性设置为 false

boolean

-

true

automatic-dropdown

对于不可搜索的 Select,是否在输入框获得焦点后自动弹出选项菜单

boolean

-

false

removeTag

多选模式下移除tag时触发

Function

-

-

focus

当 input 获得焦点时触发

Function

-

-

change

选中值发生变化时触发

Function

-

-

blur

当 input 失去焦点时触发

Function

-

-

visibleChange

下拉框出现/隐藏时触发

Function

-

-

clear

可清空的单选模式下用户点击清空按钮时触发

Function

-

-

  • tmtRate

参数

说明

类型

可选值

默认值

max

最大分值

number


5

disabled

是否为只读

boolean


false

allow-half

是否允许半选

boolean


false

low-threshold

低分和中等分数的界限值,值本身被划分在低分中

number


2

high-threshold

高分和中等分数的界限值,值本身被划分在高分中

number


4

colors

icon 的颜色。若传入数组,共有 3 个元素,为 3 个分段所对应的颜色;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的颜色

array/object


[’#F7BA2A’, ‘#F7BA2A’, ‘#F7BA2A’]

void-color

未选中 icon 的颜色

string


#C6D1DE

disabled-void-color

只读时未选中 icon 的颜色

string


#EFF2F7

icon-classes

icon 的类名。若传入数组,共有 3 个元素,为 3 个分段所对应的类名;若传入对象,可自定义分段,键名为分段的界限值,键值为对应的类名

array/object


[‘el-icon-star-on’, ‘el-icon-star-on’,‘el-icon-star-on’]

void-icon-class

未选中 icon 的类名

string


el-icon-star-off

disabled-void-icon-class

只读时未选中 icon 的类名

string


el-icon-star-on

show-text

是否显示辅助文字,若为真,则会从 texts 数组中选取当前分数对应的文字内容

boolean


false

show-score

是否显示当前分数,show-score 和 show-text 不能同时为真

boolean


false

text-color

辅助文字的颜色

string


#1F2D3D

texts

辅助文字数组

array


[‘极差’, ‘失望’, ‘一般’, ‘满意’, ‘惊喜’]

score-template

分数显示模(需要设置默认值)板

string


{value}

  • tmtColorPicker

参数

说明

类型

可选值

默认值

disabled

是否禁用

boolean


false

size

尺寸

string

medium / small / mini


show-alpha

是否支持透明度选择

boolean


false

color-format

写入 v-model 的颜色的格式

string

hsl / hsv / hex / rgb

hex(show-alpha 为 false)/ rgb(show-alpha 为 true)

popper-class

ColorPicker

下拉框的类名

string


predefine

预定义颜色

array



  • tmtRadio

参数

说明

类型

可选值

默认值

size

单选框组尺寸,仅对按钮形式的 Radio 或带有边框的 Radio 有效

string

medium / small / mini


disabled

是否禁用

boolean


false

text-color

按钮形式的 Radio 激活时的文本颜色

string


#ffffff

fill

按钮形式的 Radio 激活时的填充色和边框色

string


#409EFF

  • tmtRadio 单个选框的属性(配置在elProps中的options的单个对象中----attrs)

参数

说明

类型

可选值

默认值

label

Radio 的 value

string / number / boolean



disabled

是否禁用

boolean


false

border

是否显示边框

boolean


false

size

Radio 的尺寸,仅在 border 为真时有效

string medium / small / mini



  • tmtSwitch

参数

说明

类型

可选值

默认值

disabled

是否禁用

boolean


false

width

switch 的宽度(像素)

number


40

active-icon-class

switch 打开时所显示图标的类名,设置此项会忽略 active-text

string



inactive-icon-class

switch 关闭时所显示图标的类名,设置此项会忽略 inactive-text

string



active-text

switch 打开时的文字描述

string



inactive-text

switch 关闭时的文字描述

string



active-value

switch 打开时的值

boolean / string / number


true

inactive-value

switch 关闭时的值

boolean / string / number


false

active-color

switch 打开时的背景色

string


#409EFF

inactive-color

switch 关闭时的背景色

string


#C0CCDA

validate-event

改变 switch 状态时是否触发表单的校验

boolean


true

change

switch 状态发生变化时的回调函数

Function



  • tmtCheckbox 整体配置

参数

说明

类型

可选值

默认值

size

多选框组尺寸,仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效

string

medium / small / mini


disabled

是否禁用

boolean


false

min

可被勾选的 checkbox 的最小数量

number



max

可被勾选的 checkbox 的最大数量

number



text-color

按钮形式的 Checkbox 激活时的文本颜色

string


#ffffff

fill

按钮形式的 Checkbox 激活时的填充色和边框色

string


#409EFF

  • tmtCheckbox 单个配置(配置在elProps中的options的单个对象中----attrs)

参数

说明

类型

可选值

默认值

disabled

是否禁用

boolean


false

checked

当前是否勾选

boolean


false

  • tmtTimePicker: 时间选择器(is-range为true时defaultValue为数组,具体看请看示例)

参数

说明

类型

可选值

默认值

readonly

完全只读

boolean


false

disabled

禁用

boolean


false

editable

文本框可输入

boolean


true

clearable

是否显示清除按钮

boolean


true

size

输入框尺寸

string

medium / small / mini


placeholder

非范围选择时的占位内容

string



start-placeholder

范围选择时开始日期的占位内容

string



end-placeholder

范围选择时开始日期的占位内容

string



is-range

是否为时间范围选择,仅对timeType为timePicker时有效

boolean


false

arrow-control

是否使用箭头进行时间选择,仅对timeType为timePicker时有效

boolean


false

align

对齐方式

string

left / center / right

left

popper-class

TimePicker 下拉框的类名

string



picker-options

当前时间日期选择器特有的选项参考下表

object


{}

range-separator

选择范围时的分隔符

string

-

‘-’

value-format

可选,仅tmtTimePicker时可用,绑定值的格式。不指定则绑定值为 Date 对象

string

见日期格式


prefix-icon

自定义头部图标的类名

string


el-icon-time

clear-icon

自定义清空图标的类名

string


el-icon-circle-close

  • picker-options的配置(timeType:timeSelect)

参数

说明

类型

可选值

默认值

start

开始时间

string


09:00

end

结束时间

string


18:00

step

间隔时间

string


00:30

minTime

最小时间,小于该时间的时间段将被禁用

string


00:00

maxTime

最大时间,大于该时间的时间段将被禁用

string



  • picker-options的配置(timeType:timePicker)

参数

说明

类型

可选值

默认值

selectableRange

可选时间段,例如’18:30:00 - 20:30:00’或者传入数组[‘09:30:00 - 12:00:00’, ‘14:30:00 - 18:30:00’]

string / array



format

时间格式化(TimePicker)

string

小时:HH,分:mm,秒:ss,AM/PM A

‘HH:mm:ss’

参数

说明

类型

可选值

默认值

readonly

完全只读

boolean


false

disabled

禁用

boolean


false

editable

文本框可输入

boolean


true

clearable

是否显示清除按钮

boolean


true

size

输入框尺寸

string

large, small, mini


placeholder

非范围选择时的占位内容

string



start-placeholder

范围选择时开始日期的占位内容

string



end-placeholder

范围选择时结束日期的占位内容

string



type

显示类型

string

year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange

date

format

显示在输入框中的格式

string

见日期格式

yyyy-MM-dd

align

对齐方式

string

left, center, right

left

popper-class

DatePicker

下拉框的类名

string


picker-options

当前时间日期选择器特有的选项参考下表

object


{}

range-separator

选择范围时的分隔符

string


‘-’

default-value

可选,选择器打开时默认显示的时间

Date

可被new Date()解析


default-time

范围选择时选中日期所使用的当日内具体时刻

string[]

数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻,不指定会使用时刻 00:00:00


value-format

可选,绑定值的格式。不指定则绑定值为 Date 对象

string

见日期格式


name

原生属性

string



unlink-panels

在范围选择器里取消两个日期面板之间的联动

boolean


false

prefix-icon

自定义头部图标的类名

string


el-icon-date

clear-icon

自定义清空图标的类名

string


el-icon-circle-close

validate-event

输入时是否触发表单的校验

boolean

-

true

参数

说明

类型

可选值

默认值

shortcuts

设置快捷选项,需要传入 { text, onClick } 对象用法参考 demo 或下表

Object[]



disabledDate

设置禁用状态,参数为当前日期,要求返回

Boolean

Function


cellClassName

设置日期的 className

Function(Date)



firstDayOfWeek

周起始日

Number

1 到 7

7

onPick

选中日期后会执行的回调,只有当 daterange 或 datetimerange 才生效

Function({ maxDate, minDate })



参数

说明

类型

可选值

默认值

min

最小值

number


0

max

最大值

number


100

disabled

是否禁用

boolean


false

step

步长

number


1

show-input

是否显示输入框,仅在非范围选择时有效

boolean


false

show-input-controls

在显示输入框的情况下,是否显示输入框的控制按钮

boolean

— true

input-size

输入框的尺寸

string

large / medium / small / mini

small

show-stops

是否显示间断点

boolean


false

show-tooltip

是否显示 tooltip

boolean


true

format-tooltip

格式化 tooltip message

function(value)



range

是否为范围选择

boolean


false

vertical

是否竖向模式

boolean


false

height

Slider 高度,竖向模式时必填

string



label

屏幕阅读器标签

string



debounce

输入时的去抖延迟,毫秒,仅在show-input等于true时有效

number


300

tooltip-class

tooltip 的自定义类名

string



marks

标记, key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标记可以单独设置样式

object



参数

说明

类型

可选值

默认值

min

设置计数器允许的最小值

number


-Infinity

max

设置计数器允许的最大值

number


Infinity

step

计数器步长

number

— 1

step-strictly

是否只能输入 step 的倍数

boolean


false

precision

数值精度

number



size

计数器尺寸

string

large, small


disabled

是否禁用计数器

boolean


false

controls

是否使用控制按钮 boolean — true

controls-position

控制按钮位置

string

right

-

label

输入框关联的label文字

string



placeholder

输入框默认 placeholder

string

-

-

参数

说明

类型

可选值

默认值

options

可选项数据源,键名可通过 Props 属性配置

array



props

配置选项,具体见下表

object



size

尺寸

string

medium / small / mini


placeholder

输入框占位文本

string


请选择

disabled

是否禁用

boolean


false

clearable

是否支持清空选项

boolean


false

show-all-levels

输入框中是否显示选中值的完整路径

boolean


true

collapse-tags

多选模式下是否折叠Tag

boolean

-

false

separator

选项分隔符

string


斜杠 ’ / ’

filterable

是否可搜索选项

boolean



filter-method

自定义搜索逻辑,第一个参数是节点node,第二个参数是搜索关键词keyword,通过返回布尔值表示是否命中

function(node, keyword)

-

-

debounce

搜索关键词输入的去抖延迟,毫秒

number


300

before-filter

筛选之前的钩子,参数为输入的值,若返回 false 或者返回 Promise 且被 reject,则停止筛选

function(value)



popper-class

自定义浮层类名

string



change

当选中节点变化时触发(回调参数:选中节点的值)

expand-change

当展开节点发生变化时触发(回调参数:各父级选项值组成的数组)

blur

当失去焦点时触发(回调参数:(event: Event))

focus

当获得焦点时触发(回调参数:(event: Event))

visible-change

下拉框出现/隐藏时触发(回调参数:出现则为 true,隐藏则为 false)

remove-tag

在多选模式下,移除Tag时触发(回调参数:移除的Tag对应的节点的值)



https://www.xamrdz.com/web/2t51931393.html

相关文章: