更新记录

1.0.1（2019-12-23） 下载此版本

弥补自带pcker组件在被选择集合为复杂集合时使用的的不便 仅需初始化组件即可进行v-model双向绑定

平台兼容性

cc-picker

参考源码

View

<template>
    <view>
        <view class="form">
            <view class="form-row">
                <label class="title"><text class="red">*</text>国籍：</label>
                <ccPicker class="item" :range="list_country" v-model="person.country" @picker_change="country_change"></ccPicker>
            </view>
            <view class="form-row">
                <label class="title"><text class="red">*</text>性别：</label>
                <ccPicker class="item" :range="list_sex" k="text" v="id" null_str="不限" null_val="0" v-model="person.sex" @picker_change="sex_change"></ccPicker>
            </view>
        </view>
        <view class="form">
            <view class="form-row">
                <label class="title">国籍：</label>
                <view class="item">{{ person.country_str }}</view>
            </view>
            <view class="form-row">
                <label class="title">性别：</label>
                <view class="item">{{ person.sex_str }}</view>
            </view>
        </view>
    </view>
</template>

Javascrip

    import ccPicker from "@/components/cc-picker/cc-picker.vue"
    export default {
        components: {
            ccPicker
        },
        data() {
            return {
                person: {
                    sex: '1',
                    sex_str: '',
                    country: '1',
                    country_str: '',
                },
                list_country: [
                    { V: '1', K: '中国' },
                    { V: '2', K: '美国' },
                    { V: '3', K: '英国' },
                    { V: '4', K: '韩国' }
                ],
                list_sex: [
                    { id: '1', text: '男' },
                    { id: '2', text: '女' }
                ]
            }
        },
        methods: {
            country_change(e) {
                this.person.country_str = e.new_k;
            },
            sex_change(e) {
                this.person.sex_str = e.new_k;
            }
        }
    }

属性

事件