从读取数据还原iview穿梭框组件信息（ js中indexOf错误匹配）

本文链接：https://blog.youkuaiyun.com/weixin_40366684/article/details/109089930

在前端开发中遇到iview Transfer组件的问题，由于js中indexOf错误匹配导致穿梭框显示异常。文章详细解释了如何从数据库读取历史数据以还原穿梭框的正确状态，并指出在数据字段"data_full.ip_part"与"data_full.ip"匹配时的错误，提出通过字符串分割后再进行完全匹配的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从读取数据还原iview穿梭框组件信息（ js中indexOf错误匹配）

在完成前端页面的过程中遇到了一个问题，使用了iview的穿梭框控件：
在这里插入图片描述

Transfer 组件主要基于以下四个 API 来使用：

:data：总体数据，数组，每项为一个对象，且必须含有 key 值，组件基于此做索引。
:target-keys：目标列索引集合，数组，每项为数据的 key 值，Transfer 会将含有这些 key 值的数据筛选到右边。
:render-format：每行数据显示的格式函数，默认优先显示 label 值，没有时显示 key 值，可以自己组合出需要的数据格式。
@on-change：当点击转移按钮时，组件本身并不会转移数据，而是触发事件，由用户来操作数据。
为了完成历史数据的修改，那么需要从数据库里面读取对应的选择信息，然后还原这个穿梭框的组成。
可以分为两步，首先读取所有的字段数组，其次读取之前选择的字段也就是右边展示的字段：

    let param2 = {
   
          dataId: strategy.etlExtractDataSource.id,
          tableName: strategy.readtables
        }
        let extractColumns = this.splitStr(strategy.readcolumns)
        axios({
   
          method: 'post',
          url: this.GLOBAL.etlUrl + '/api/get_columns',
          withCredentials: true,
          params: param2
        }).then(function (response) {
   
          var data = response.data
          if (data['status'])