使用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)

示例

效果：

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对应的节点的值）