一、应用场景

• 应用场景：前端实现取出单列中用逗号分隔开的多个值进行勾选后并将勾选的多个值分别展现在el-select的下拉框中进行选择
  
  

• 需求分析：
  （1）当前存在ID列，且ID列中可能存在像 1,2,4,6,8这样的多个值或者单个的值
  （2）在select的框中要显示当前列中的所有值，且该框为多选框（有multiple属性）
  （3）在select框中清除某个值后，需在select下拉框中重新显示所有的值

二、前端代码实现

<template>
  <table>
    <el-button
        @click="openId"
        >修改ID</el-button
      >
    <el-dialog
      draggable
      title="修改ID"
      width="500px"
      v-model="IdVisible"
    >
      <el-form label-width="120px" v-model="Info">
        <el-form-item
          label="OID"
          prop="Id"
        >
          <el-select
            class="full-width"
            v-model="Info.Id"
            multiple
            placeholder="请选择"
            @visible-change="handleInfo"
          >
            <el-option
              v-for="(item, index) in Info.Id.toString().split(',')"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="ID"
          prop="newId"
          ><el-input v-model="Info.newId"
        /></el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="IdVisible = false">
           关闭
        </el-button>
        <el-button type="primary" @click="saveInfo">
          保存
        </el-button>
      </template>
    </el-dialog>
  </table>
</template>

<script lang="ts">
import {
    
     defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
    
    
  name: 'List',
  components: {
    
    },
  setup() {
    
    
    const state = reactive<ViewState>({
    
    
      selected: [],
      IdVisible: false,
      Info: {
    
    
        // 原id值
        Id: '',
        // 修改后的id值
        newId: '',
        // 用与存储列中的所有值
        IdOptions: [],
      },
    });

    // 当点击下拉框时就触发该值（做这一步的原因是：清除选项后，发现再次点击下拉框时其下拉框中没有值了，只有当重新进入该对话框其下拉框中才有值展示）
    const handleInfo = visible => {
    
    
      if (visible) {
    
    
        // 重新将渲染选项的值赋值给原Id（清除值后点击下拉框重新显示）
        state.Info.Id = state.Info.IdOptions;
      }
    };

    function openId() {
    
    
      state.IdVisible = true;
      // selected 为保存所有值的渲染项
      const [selection] = state.selected;
      // 将 order.fbaPo 转换为数组类型
      state.Info.Id = selection.Id.split(',');
      // 将 Id 的值添加到 IdOptions 数组中，用于渲染选项
      state.Info.IdOptions = state.Info.Id;
    }
    function saveInfo() {
    
    
      // 以下写具体的业务逻辑
      ...
    }

    return {
    
    
      ...toRefs(state),
      openId,
      handleInfo,
      saveInfo
    };
  },
});
</script>

<style scoped lang="scss"></style>

三、后端实现

• 后端将ID列的值编写成接口的形式给到前端，前端通过在el-select下拉框中指向后端给的接口即可

四、总结

前端实现需要保持逻辑清晰，一步一步接着往下写即可，而如果后端实现对于前端而言更方便，前端只需调用接口即可