el-select下拉框遠端搜尋且多選時，編輯需要回顯的一個簡單案例

天渺工作室發表於2024-04-21

前端業務開發中不管使用vue2~3，還是react，angular各種前端技術棧，經常會遇到這種業務。一個下拉框Select中，不僅需要需要支援遠端模糊搜尋，還需要支援多選。並且在編輯時，還能正常把已經多選好的內容回顯到Select中。

用Vue3+ElementPlus+TS舉一個簡單的案例。其他技術棧思路是一致的

新增時的邏輯

這一步和普通操作沒有什麼區別

    <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>


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了。

    <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>


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-李四'];
});

這時候options的繫結時就不僅僅是value了，而是這樣的格式。這樣就不需要透過後端介面來實現多選內容的資料回顯了。

['1-張三', '2-李四']

編輯操作時剔除label內容

當前options的繫結值已經是“['1-張三', '2-李四']”這樣了，編輯確定操作時剔除-label就行。

const originalArray = ['1-張三', '2-李四'];  
  
const numericArray = originalArray.map(item => {  
  // 使用split('-')分割字串，並取第一個元素（即數字部分）  
  const numberPart = item.split('-')[0];  
  // 將字串轉換為數字  
  return parseInt(numberPart, 10);  
});  
  
console.log(numericArray); // 輸出: [1, 2]。編輯確定操作時，入參給介面就行。

相關文章