【小5聊】layui第三方插件-xm-select参数

【版本】

1.1.8

由于版本的不同,功能和参数都有可能调整。由于插件资料比较少,在这里把所有参数都记录下。

【参数如下】

【常用参数说明】

  • on:是选择选项时的事件
  • filterMethod:过滤方法,会循环数组数据,可对数据进行过滤等处理。每次点击下拉时都会触发一遍。

                      这里记得return一些t.title修改的值。没有修改也要原样返回否则会显示空文本

  • template:模板数据,会循环数组数据。如果有用到这个方法,也要return。否则也是空文本

//data数据格式:[{title:'2020-10-10 11:00:00 标题一',tip:'小提示'}]
template({ item, sels, name, value }) {
  return item.title + '<span style="position: absolute; right: 10px; color: #8799a3">' + item.tip+ '</span>'
},
  • repeat:是否可以取消当前勾选,默认可取消选中,开启不可取消的情况下,一般配合radio单选框来使用。radio:true,repeat:true
  • filterable:是否开启筛选文本框
  • initValue:设置默认值,记得这里是Array()数组,['','']

备注:filterMethod比template方法先执行,filterMethod循环所有数据后,再执行template方法

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要设置 xm-select 非空,可以使用 xm-select 的 verify 参数来实现。具体步骤如下: 1. 在 HTML 中给 xm-select 组件添加一个 id,例如:id="test-select"。 2. 在 JavaScript 中使用以下代码初始化 xm-select 组件,并设置 verify 参数: ``` xmSelect.render({ el: '#test-select', verify: function (val) { if (!val || val.length <= 0) { return '请选择至少一项'; } }, // 其他参数... }); ``` 上面的代码中,verify 参数是一个回调函数,用于验证选中的值是否符合要求。如果选中的值为空,则返回一个字符串,表示验证失败,否则返回 undefined 或不返回值,表示验证通过。 3. 在 HTML 中添加一个用于显示验证错误信息的元素,例如:id="test-error"。 4. 在 JavaScript 中监听 xm-select 的 change 事件,并在事件处理函数中更新验证错误信息的显示状态: ``` var select = xmSelect.render({ el: '#test-select', verify: function (val) { if (!val || val.length <= 0) { return '请选择至少一项'; } }, // 其他参数... }); var errorEl = document.getElementById('test-error'); select.on('change', function (data) { var error = select.verify(); if (error) { errorEl.innerHTML = error; errorEl.style.display = 'block'; } else { errorEl.innerHTML = ''; errorEl.style.display = 'none'; } }); ``` 上面的代码中,change 事件的回调函数获取到选中的数据,然后调用 verify 方法进行验证。如果验证失败,则更新错误信息元素的内容和显示状态,否则隐藏错误信息元素。 通过以上步骤,就可以实现 xm-select 的非空验证了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

全栈小5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值