更新记录

1.0.0（2022-05-26）

初次提交

平台兼容性

z-select

使用示例

<template>
    <!-- 打开可搜索下拉框组件 -->
    <view class="item-value" @click="openSelect()">
        <input class="uni-input" :value="companyName" placeholder="请选择" disabled />
    </view>

    <!-- 可搜索下拉框组件，companySelect 自定义，companyList 自定义，getList 自定义，selectClose 自定义，pageIndex、pageSize 用默认的 0、20 -->
    <z-select ref="companySelect" :list="companyList" @getList="getList" @close="selectClose" />
</template>

<script>
    export default {
        data() {
            return {
                companyName: '',
                companyId: '',
                companyList: [],
            }
        },
        onLoad() {
            this.getList()
        },
        methods: {
            // 关闭 select
            openSelect() {
                this.$refs.companySelect.open()
            },
            // 获取 select 的数据
            getList(queryData) {
                let params = queryData ? {
                    "companyName": queryData.key // 模糊搜索条件，根据后端接口请求参数自行切换
                } : {}
                getCompanyList(params).then(res => {
                    this.companyList = res.map( item => {
                        // 这里需要注意的是，可搜索下拉组件中是根据 id， name来的，
                        // 所以后端返回的字段如果不一样的话，需要将数据重组一下，保证返回的每条数据中含有id，name
                        item.name = item.companyName
                        return item
                    })
                })
            },
            // 关闭 select
            selectClose(row) {
                // row 是选择的行数据，一般来说，name 做页面的显示，id 为后台需要的字段
                if (row) {
                    this.companyName = row.name
                    this.companyId = row.id
                }
            }
        }
    }
</script>

<style lang='scss' scoped>

<style>