el-select下拉框远程搜索且多选时,编辑需要回显的一个简单案例

前端业务开发中不管使用vue2~3,还是react,angular各种前端技术栈,经常会遇到这种业务。一个下拉框Select中,不仅需要需要支持远程模糊搜索,还需要支持多选。并且在编辑时,还能正常把已经多选好的内容回显到Select中。

用Vue3+ElementPlus+TS举一个简单的案例。其他技术栈思路是一致的
新增时的逻辑

这一步和普通操作没有什么区别

html 复制代码
<template>
    <el-select
        v-model="selectValue"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请搜索并选择内容"
        :remote-method="remoteMethod"
        style="width: 240px"
    >
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="`${item.value}-${item.label}`"
            :value="item.value"
        />
    </el-select>
</template>
ts 复制代码
<script lang="ts" setup>
let selectValue = ref([]);
let options = ref<
    {
        value: string;
        label: string;
    }[]
>([]);
const remoteMethod = (value: string) => {
    // 模拟远程接口查询
    // 一般远程模糊搜索的接口都带分页,如果数据为10万条,模糊搜索时肯定一次不能查10万条,还是需要正产分页的
    setTimeout(() => {
        options.value = [
            {
                value: "1",
                label: "张三",
            },
            {
                value: "2",
                label: "李四",
            },
            {
                value: "3",
                label: "王五",
            },
        ];
    }, 200);
};

</script>

多选OK的效果

编辑需要回显时的逻辑(关键点)

当这个下拉框在编辑页时,需要把同样已经多选的内容完整回显到这个下拉框中,因为数据本身就是多选,接口还是是分页的,回显时肯定不能使用接口查询功能来回显数据。因此,el-select的:value绑定就不应该只绑定value了。

html 复制代码
<template>
    <el-select
        v-model="selectValue"
        multiple
        filterable
        remote
        reserve-keyword
        placeholder="请搜索并选择内容"
        :remote-method="remoteMethod"
        style="width: 240px"
    >
        <!--value直接也把label绑定上-->
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="`${item.value}-${item.label}`" 
            :value="`${item.value}-${item.label}`"
        />
    </el-select>
</template>
ts 复制代码
<script lang="ts" setup>
let selectValue = ref([]);
let options = ref<
    {
        value: string;
        label: string;
    }[]
>([]);
const remoteMethod = (value: string) => {};
onMounted(() => {
    // 模拟编辑页初始化的时候接口初始化赋值逻辑
    // 编辑页面查询到多选的详情信息data
    const data = [  
        {  
            value: "1",  
            label: "张三",  
        },  
        {  
            value: "2",  
            label: "李四",  
        }, 
    ];  
  
    selectValue.value = data.map(item => `${item.value}-${item.label}`); //['1-张三', '2-李四'];
});
</script>

这时候selectValue的绑定时就不仅仅是value了,而是这样的格式。这样就不需要通过后端接口来实现多选内容的数据回显了。

json 复制代码
['1-张三', '2-李四']
编辑操作时剔除label内容

当前selectValue的绑定值已经是"['1-张三', '2-李四']"这样了,编辑操作确定提交数据时剔除-label就行。

ts 复制代码
const originalArray = ['1-张三', '2-李四'];  
  
const numericArray = originalArray.map(item => {  
  // 使用split('-')分割字符串,并取第一个元素(即数字部分)  
  const numberPart = item.split('-')[0];  
  // 将字符串转换为数字  
  return parseInt(numberPart, 10);  
});  
  
console.log(numericArray); // 输出: [1, 2]。编辑确定操作时,入参给接口就行。

如果业务需求的label展示值不是

ts 复制代码
:label="`${item.value}-${item.label}`"

这种形式,而是只展示名称label,不需要对应value

ts 复制代码
:label="`${item.label}`"

这样的形式,有空我在把另一种思路加上。未完待续...

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰9 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪9 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy10 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom11 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom11 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试