美文网首页
uniapp picker关于multiSelector中设置r

uniapp picker关于multiSelector中设置r

作者: MyLee | 来源:发表于2020-11-19 15:42 被阅读0次

    picker设置model="multiSelector"时,可以成为多列选择器,比如一个二维对象数组 arr1=[{name1:'aaa1'}] arr2=[{name2:'aaa2'}],页面需要两列分别显示name1和name2,此时range可以设置为为 :range="[arr1,arr2]",可这样设置之后会有一个很大的问题,列1和列2显示的是object,其实我们最终要显示的是name1和name2,在model为selector时,range-key可以设置为要显示的那个字段名:range-key="'name'"来解决这个问题,但只是支持单列选择,在多列选择该怎么设置呢?原先以为range-key也可以像range一样设置成为一个多维简单数组,类似于:range-key="['name1','name2']",后来发现这样做是行不通的,通过uniapp源码发现,rangeKey定义的是string,这意味着他不能接收数组,再通过具体显示数据时的下面源码发现,rangeKey只能是一个同样的字段名

     <div
           v-for="(item, index) in rangeArray[0]"
                :key="index"
                class="uni-picker-item"
                :class="{ selected: valueArray[0] === index }"
                @click="
                  valueArray[0] = index;
                  _change();
                "
              >
             {{ typeof item === "object" ? item[rangeKey] || "" : item }}
    </div>
    

    因此,rangeKey不能分别设置为name1、name2,只能像单列选择器那样设置为:range-key="'name'"
    居于此,arr1的name1,arr2的name2要么就让后端将字段名称统一成一个返回,要么自己在获取到数据源时,自己for循环修改过来

    相关文章

      网友评论

          本文标题:uniapp picker关于multiSelector中设置r

          本文链接:https://www.haomeiwen.com/subject/gpxliktx.html