input模糊匹配 组件赋值问题

Posted 2022-01-12 wplcc

<template>
    <el-autocomplete
        v-model="svalue"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        size="small"
        @select="setUserInfo"
    ></el-autocomplete>
</template>

<script>
    import getUserList from  ‘@/api/dictionary_option‘

    export default 
        data() 
            return 
                restaurants: [],
                svalue: this.value
            ;
        ,
        props: 
            value: 
                type: String
            //接受外部v-model传入的值
        ,
        watch:
            //判断下拉框的值是否有改变
            value(val) 
                this.svalue = val;//②监听外部对props属性value的变更，并同步到组件内的data属性svalue中
            ,
            svalue(val, oldVal) 
                if(val == "")
                    this.$emit(‘input‘, this.svalue);
                
            ,
        ,
        methods: 
            getList()
                let that = this;
                return getUserList(that.svalue)// 获取用户列表
                    .then((res) => 
                        let arr = [];
                        // el-autocomplete元素要求数组内是对象，且有value属性，此处做一个格式调整
                        $.each(res.data.result, function(i, item)
                            arr.push(
                                value: item.displayName, // 员工姓名+编码
                                sid: item.sid, // 员工id
                                userCode: item.userCode, // 员工编码
                                userName: item.userName, // 员工姓名
                                userNum: item.userNum // 员工工号
                            )
                        );
                        that.restaurants = arr;
                    ).catch(error => 
                        console.log(error);
                    );
            ,
            querySearchAsync(queryString, cb) 
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                cb(results);
            ,
            createStateFilter(queryString) 
                return (state) => 
                    return (state.value.indexOf(queryString.toLowerCase()) === 0);
                ;
            ,
            setUserInfo(item) // item为选中字段所在的对象
                // console.log(item);
                this.svalue = item.userName;// 输入框展示姓名
                /* 子组件通过事件发射向父组件传递事件及参数，$emit即为发射事件
                  第一个参数为向父组件传递的事件名，第二个参数为向父组件传递的参数 */
                this.$emit( ‘setUserInfo‘, item);// 回调  传参（整个对象，包括姓名、员工号）
            
        ,
        mounted() 
            // this.svalue=this.value;//初始话下拉框的值
            this.getList();
        
    ;
</script>