更新记录

1.0.2（2021-07-05） 下载此版本

1.0.2 优化组件初始化时调用了两处初始化方法

1.0.1（2021-06-30） 下载此版本

1.0.1版本更新

平台兼容性

fy-tree-select 树形结构展示模态框

支持app-nvue、app-vue、微信小程序、H5等，没有标明的平台表示没有测试，谨慎使用即可。
依赖uni自带的uni-transition组件，使用fy-dropdown组件时请先下载依赖组件，并配置uniapp的easycom组件规范。

调用示例

<fy-tree-select ref="FyTreeSelect" v-model="defaultValue" :options="list" @change="onChange" @confirm="onConfirm">
    <button type="default">显示</button>
</fy-tree-select>

import FyTreeSelect from '@/components/fy-tree-select/fy-tree-select.vue'
export default {
    components: { FyTreeSelect },
    data() {
        return {
            defaultValue: [],
            list: [
                {
                    label: '一级 1', value: 1,
                    children: [{ label: '二级 1-1', value: 11, children: [{ label: '三级 1-1-1', value: 111 }] }]
                }, {
                    label: '一级 2', value: 2,
                    children: [
                        { label: '二级 2-1', value: 21, children: [{ label: '三级 2-1-1', value: 211 }] },
                        { label: '二级 2-2', value: 22,  children: [{ label: '三级 2-2-1', value: 221 }] },
                        { label: '二级 2-3', value: 23, children: [{ label: '三级 2-3-1', value: 231 }] },
                        { label: '二级 2-4', value: 24,  children: [{ label: '三级 2-4-1', value: 241 }] },
                        { label: '二级 2-5', value: 25, children: [{ label: '三级 2-5-1', value: 251 }] },
                        { label: '二级 2-6', value: 26,  children: [{ label: '三级 2-6-1', value: 261 }] },
                        { label: '二级 2-7', value: 27, children: [{ label: '三级 2-7-1', value: 271 }] },
                        { label: '二级 2-8', value: 28,  children: [{ label: '三级 2-8-1', value: 281 }] },
                    ]
                }, {
                    label: '一级 3', value: 3,
                    children: [
                        { label: '二级 3-1', value: 31, children: [{ label: '三级 3-1-1', value: 311 }] },
                        { label: '二级 3-2', value: 32, children: [{ label: '三级 3-2-1', value: 321 }]
                    }]
                },
            ],
        }
    },
    methods: {
        onChange(e) {
            console.log(e)
        },
        onConfirm(e) {
            console.log(e)
        }
    }
}

属性说明

事件说明

Slots

补充custom-child案例

<fy-tree-select ref="FyTreeSelect" v-model="defaultValue" :customChild="true" :options="list" @change="onChange" @confirm="onConfirm">
    <button type="default">显示</button>
</fy-tree-select>

<script>
import FyTreeSelect from '@/components/fy-tree-select/fy-tree-select.vue'
export default {
    components: { FyTreeSelect },
    data() {
        return {
            defaultValue: [2, 22, 211],
            list: [
                {
                    label: '一级 1', value: 1,
                    children: [{ label: '二级 1-1', value: 11, children: [{ label: '三级 1-1-1', value: 111 }] }]
                }, {
                    label: '一级 2', value: 2,
                    children: [
                        { label: '二级 2-1', value: 21, children: [{ label: '三级 2-1-1', value: 211 }] },
                        { label: '二级 2-2', value: 22,  children: [{ label: '三级 2-2-1', value: 221 }] },
                        { label: '二级 2-3', value: 23, children: [{ label: '三级 2-3-1', value: 231 }] },
                        { label: '二级 2-4', value: 24,  children: [{ label: '三级 2-4-1', value: 241 }] },
                        { label: '二级 2-5', value: 25, children: [{ label: '三级 2-5-1', value: 251 }] },
                        { label: '二级 2-6', value: 26,  children: [{ label: '三级 2-6-1', value: 261 }] },
                        { label: '二级 2-7', value: 27, children: [{ label: '三级 2-7-1', value: 271 }] },
                        { label: '二级 2-8', value: 28,  children: [{ label: '三级 2-8-1', value: 281 }] },
                    ]
                }, {
                    label: '一级 3', value: 3,
                    children: [
                        { label: '二级 3-1', value: 31, children: [{ label: '三级 3-1-1', value: 311 }] },
                        { label: '二级 3-2', value: 32, children: [{ label: '三级 3-2-1', value: 321 }]
                    }]
                },
            ],
            update1Data: [
                {
                    label: '二级 3-3', value: 33,
                    children: [
                        { label: '三级 3-3-1', value: 331 }, { label: '三级 3-3-1', value: 331 }
                    ]
                },
                {
                    label: '二级 3-4', value: 34,
                    children: [
                        { label: '三级 3-4-1', value: 341 }, { label: '三级 3-4-2', value: 342 }
                    ]
                }
            ],
            update2Data: [
                { label: '三级 5-1-1', value: 511 },
                { label: '三级 5-1-2', value: 512 },
                { label: '三级 5-1-3', value: 513 },
                { label: '三级 5-1-4', value: 514 }
            ]
        }
    },
    methods: {
        onChange(e) {
            if (e.column === 0) {
                // 模拟请求远程数据
                setTimeout(()=>{
                    this.$refs.FyTreeSelect.updateColumnData(this.update1Data, 1)
                }, 3000)
            } else if (e.column === 1) {
                setTimeout(()=>{
                    this.$refs.FyTreeSelect.updateColumnData(this.update2Data, 2)
                }, 3000)
            }
        },
        onConfirm(e) {
            console.log(e)
        }
    }
}
</script>