美文网首页
u-select的使用(多列联动)

u-select的使用(多列联动)

作者: jing_bao | 来源:发表于2021-09-06 17:12 被阅读0次

template

/*其中v-model 布尔值变量,用于控制选择器的弹出与收起
default-value 默认选中的下标
confirm-color 确认按钮的颜色
safe-area-inset-bottom  是否开启[底部安全区适配](https://www.uviewui.com/components/safeAreaInset.html#%E5%85%B3%E4%BA%8Euview%E6%9F%90%E4%BA%9B%E7%BB%84%E4%BB%B6safe-area-inset%E5%8F%82%E6%95%B0%E7%9A%84%E8%AF%B4%E6%98%8E)
mode  模式选择"mutil-column-auto"-多列联动模式
list  数组
label-name  list数据的label属性名(用于显示)
value-name  list数据的value属性名  (用于接口传参)
child-name  list数据的children属性名,只对多列联动模式有效
confirm  点击确定按钮,返回当前选择的值
*/
<view @click="()=> show=true">请选择</view>
<u-select v-model="show" :default-value="index" confirm-color="#343bad" safe-area-inset-bottom="true" mode="mutil-column-auto" :list="array" value-name="areaCode" label-name="areaName" child-name="subRegions" @cancel="cancel" @confirm="bindPickerChange"></u-select>

script
list的格式 如下

                  array=[{
                        areaCode: 1,
                        areaName: '中国',
                        subRegions: [
                            {
                                areaCode: 2,
                                areaName: '广东'
                            },
                            {
                                areaCode: 5,
                                areaName: '广西'
                            }
                        ]
                    },
                    {
                        areaCode: 8,
                        areaName: '美国',
                        subRegions: [
                            {
                                areaCode: 9,
                                areaName: '纽约'
                            }
                        ]
                    }
                ]
export default{
        name:'perfectData',
        data(){
            return{
                show:false,
                index: [0,0], //默认选中
                array: [], //数组
                provinceCode:'',//省
                cityCode:'' //市
            }
        },
        methods: {
            // 选择任务分类
            bindPickerChange: function(e) {
                console.log('select发送选择改变,携带值为', e)
                let value = e;
                for (let i =0;i<this.array.length;i++){
                    if(this.array[i].areaName==value[0]['label']){
                        this.index[0] = i
                        let item = this.array[i]
                        for(let j=0;j<item['subRegions'].length;j++){
                            if(item['subRegions']['areaName']==value[1]['label']){
                                this.index[1] = j
                            }
                        }
                    }
                }
                this.title = value[0]['label']+','+value[1]['label']
                this.provinceCode = value[0]['value']
                this.cityCode = value[1]['value']
            },
            cancel(){}
}
}

相关文章

  • u-select的使用(多列联动)

    template scriptlist的格式 如下

  • UIPickView - 浅谈

    是什么?选择列表视图 有什么用?多列联动的选择。 怎么使用?遵循代理协议设置代理对象实现代理方法-- 遵循代理协议...

  • 微信小程序三级联动之多列选择器

    有些时候,三级联动业务场景并不只是全国地区选择,可能还涉及到自定义分类的三级联动,这时就需要使用微信的多列选择器。...

  • Antd@4.0 表格多列联动排序

    表格有一个常用的功能就是排序功能,排序功能依据谁排分为两种: 前端排序(简单的序号等) 后端排序(复杂点的排序,一...

  • CSS3多列布局

    定义列数column-count 在CSS3的多列布局中,我们可以使用column-count属性指定多列布局的列...

  • MySQL查询技巧

    1.行转列 2.列转行 3.在子查询中实现多列过滤 单列: 多列: 4.同一属性的多值过滤 使用关联进行查询 使用...

  • 聊聊mysql的多列组合查询

    序 本文主要展示如何使用mysql的多列组合查询 何为多列组合查询呢,就是查询的值不再是单个列的值,而是组合列的值...

  • 7. 多列

    1. 多列的效果 说明:在CSS3中,可以创建多列来对文本或者区域进行布局。 2. 使用多列实现瀑布流效果 瀑布流...

  • Android之嵌套联动<三>:Collapsing

    Android之嵌套联动<一>:NestedScrolling的使用Android之嵌套联动<二>:Coordin...

  • Sliver组件

    页面内多视图的联动就需要使用sliver组件了,首先要借助视窗CustomScrollview,CustomScr...

网友评论

      本文标题:u-select的使用(多列联动)

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