更新记录

1.2.3（2022-11-11）

• 优化bug

1.2.1（2021-03-17）

更新最大宽度

1.2（2021-03-17）

• 支持多选+other

平台兼容性

简介

正常情况下使用单选/多选方式（uni-data-checkbox），只能选择这个列表内的数据，如果有个选项是其他，要求可以输入文字就不能满足了，
此控件是基于官方的uni-data-checkbox增加了一个“其他”选项扩展，更详细的文档请查看官方文档

插件特有属性

官方默认属性

绑定事件

使用效果

完整示例

<template>
    <view>
        <uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast" labelWidth="100"
            labelPosition="top">
            <view class="">
                <text>本地数据示例</text>
            </view>
            <uni-forms-item name="tag_unit" label="1.正常单选">
                <cloud-data-checkbox-other mode="tag" v-model="formData.tag_unit" :localdata="units"
                    @change="chageResult" @input="chageResultInput">
                </cloud-data-checkbox-other>
            </uni-forms-item>
            <uni-forms-item name="tag_unit10" label="1-1.正常单选,自动添加其他选项">
                <cloud-data-checkbox-other mode="tag" v-model="formData.tag_unit10" :localdata="units2"
                    @change="chageResult" @input="chageResultInput">
                </cloud-data-checkbox-other>
            </uni-forms-item>
            <uni-forms-item name="tag_unit11" label="2.其他单选">
                <cloud-data-checkbox-other mode="tag" v-model="formData.tag_unit11" :localdata="units"
                    @change="chageResult" @input="chageResultInput">
                </cloud-data-checkbox-other>
            </uni-forms-item>
            <uni-forms-item name="tag_unit2" label="3.正常多选">
                <cloud-data-checkbox-other mode="tag" multiple v-model="formData.tag_unit2" :localdata="units"
                    @change="chageResult" @input="chageResultInput">
                </cloud-data-checkbox-other>
            </uni-forms-item>
            <uni-forms-item name="tag_unit22" label="4.其他多选">
                <cloud-data-checkbox-other mode="tag" multiple v-model="formData.tag_unit22" :localdata="units"
                    @change="chageResult" @input="chageResultInput">
                </cloud-data-checkbox-other>
            </uni-forms-item>
            <uni-forms-item name="tag_unit221" label="5.正常+其他多选">
                <cloud-data-checkbox-other mode="tag" multiple v-model="formData.tag_unit221" :localdata="units"
                    @change="chageResult" @input="chageResultInput">
                </cloud-data-checkbox-other>
            </uni-forms-item>

            <view class="" style="margin-top: 30px;">
                <text>查询数据库示例，如果后台没有“opendb-city-china”表，需要先添加一次，此表仅为测试表，可以根据自己需求，改成其他表</text>
            </view>
            <uni-forms-item name="city1" label="7.城市单选">
                <cloud-data-checkbox-other mode="tag" v-model="formData.city1" collection="opendb-city-china"
                    field="name as text,name as value" where="parent_code=='110100'" :pageSize="5" @change="chageResult"
                    @input="chageResultInput">
                </cloud-data-checkbox-other>
            </uni-forms-item>
            <uni-forms-item name="city2" label="8.城市多选">
                <cloud-data-checkbox-other mode="tag" multiple v-model="formData.city2" collection="opendb-city-china"
                    field="name as text,name as value" where="parent_code=='110100'" :pageSize="5" @change="chageResult"
                    @input="chageResultInput">
                </cloud-data-checkbox-other>
            </uni-forms-item>
            <view class="">
                <text>{{result}}</text>
            </view>
            <view class="uni-button-group" style="margin-top: 30px;">
                <button type="primary" class="uni-button" @click="submit">获取表单</button>
            </view>
        </uni-forms>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                formData: {
                    tag_unit: "份",
                    tag_unit10: "份",
                    tag_unit11: "吨",
                    tag_unit2: "份",
                    tag_unit22: ["Kg"],
                    city1: "",
                    city2: "",
                    tag_unit221: ["份", "Kg"],
                },
                result: "点击获取表单，得到最终数据"
            };
        },
        computed: {
            units() {
                let otherOption = {
                    text: "其他",
                    is_other: true,
                    value: "其他"
                };
                return [{
                    text: "份",
                    value: "份"
                }, otherOption]
            },
            units2() {
                return [{
                    text: "份",
                    value: "份"
                }]
            },
        },
        methods: {
            chageResult(e) {
                console.log("chageResult", e)
            },
            chageResultInput(e) {
                console.log("chageResultInput", e)
            },
            submit() {
                this.$refs.form.validate().then((res) => {
                    console.log("result", res)
                    this.result = JSON.stringify(res, null, 4)
                }).catch((errors) => {
                    uni.hideLoading()
                })
            }
        }
    }
</script>

<style lang="scss">

</style>