今天对接一个第三方的接口的时候有一个参数是这样子的: 七位数字0000000,第一位到第七位分别表示周一到周末,每一位上0表示没有选中,1表示选中,就是一个多选的功能
前端页面的表单中如何设计这个多选功能呢?
一般的select组件都是这样子,然后绑定选中的值都是无序list
const options = [{
key:'周一',
value:'0' //从0开始正好可以表示下标
...
}]
然后定义一个7个0的数据通过下表修改对应的数据,再将修改后的数据合并。这是一般做法
当我看到这个参数的描述后 我第一反应是二进制
之前刷抖音的时候看到过一个案例使用二进制来做权限控制 二进制的每一位代表着一种权限。以此类推,在这里正好一样,每一位都代表着一天。下面是我设置的select的options
const eqWeekOption = [
{
text: '周一',
value: '1000000',
},
{
text: '周二',
value: '0100000',
},
{
text: '周三',
value: '0010000',
},
{
text: '周四',
value: '0001000',
},
{
text: '周五',
value: '0000100',
},
{
text: '周六',
value: '0000010',
},
{
text: '周日',
value: '0000001',
},
];
然后我们会得到一个选中的list的,然后将选中的list的十进制相加在转换成二进制就可以了,但是需要注意的是转成二进制的时候会改变长度需要补零。