element-ui el-autocomplete怎么使用以及怎么控制只能输入数字

el-autocomplete实现的效果是输入内容下面给提示.然后选择一条就填写到了相应的位置

element-ui el-autocomplete怎么使用以及怎么控制只能输入数字_第1张图片element-ui el-autocomplete怎么使用以及怎么控制只能输入数字_第2张图片

 

 

  v-model="addSFormmobile" 

 :fetch-suggestions="querySearch" 

v-numberonlys

 placeholder="请输入内容"

 @select="usernameSelect" 

clearable>

                

                    {{item.mobile}},

                    {{item.username}},

                    {{item.grades}}

                

            

export default {

    

data() {

            return {

                addSFormmobile:"",

            };

        },

        methods: {

     querySearch(query, cb) {

                if(query == '' ) {

                      return cb([]);

                }else  if(!isNaN(parseInt(query))&&query.length < 11){//手机号

                      return cb([]);

                }else{

                    var para = {

                        username: isNaN(parseInt(query)) ? query : '',  //isNaN不是数字返回true。如果是数字就是手机号码。如果不是就是输入的姓名

                        mobile: isNaN(parseInt(query)) ? '' : query

                    }

                    queryuser(para).then(res => {//这里访问接口queryuser

                        if(res.code == 1) {

                            cb(res.data)

                        } else {

                            this.$message.error(res.msg);

                            return cb([])

                        }

                    })

                } 

            },

usernameSelect(val) {

                this.addSFormmobile = val.mobile;

                this.addSFormusername = val.username;

},

 下面是queryuser接口返回的数据。我们只要是使用手机号和姓名两个字段element-ui el-autocomplete怎么使用以及怎么控制只能输入数字_第3张图片

 

 

你可能感兴趣的:(element-ui)