view UI Plus select组件远程搜索赋值default-label无效问题解决

原创

已于 2024-03-12 15:52:30 修改 · 1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#view design #vue.js #javascript #前端

于 2024-03-12 14:32:14 首次发布

本文讲述了在使用view UI Plus的select组件进行远程搜索时，如何处理默认值default-label无法生效的问题。在尝试了文档方法和网上解决方案后，通过分析代码生命周期，发现是因为组件初始化只执行一次，导致父组件传递的值无法更新默认搜索值。通过在组件上添加条件判断，实现了默认值的正确渲染。

产品需求：输入信息的时候提供快速查询提示功能，效果如图
在这里插入图片描述
所有的功能都实现，从另一个页面跳过来时需要接收一个默认搜索值，卡壳了，设置不成功。
项目中使用的是view UI Plus框架，api文档中默认使用方法如下：

<template>
    <Row :gutter="24">
        <Col span="12">
            <Select
                v-model="model"
                filterable
                :remote-method="remoteMethod3"
                default-label="北京"
                :loading="loading3"
            >
                <Option v-for="(option, index) in options3" :value="option.value" :key="index">{
  
  {option.label}}</Option>
            </Select>
        </Col>
        <Col span="12">
            <Select
                v-model="model1"
                multiple
                filterable
                :remote-method="remoteMethod4"
                :default-label="['北京', '深圳']"
                :loading="loading4"
                @on-set-default-options="setDefaultOptions"
            >
                <Option v-for="(option, index) in options4" :value="option.value" :key="index">{
  
  {option.label}}</Option>
            </Select>
        </Col>