vue2手写穿梭框(带编辑功能)

 因为项目需要，要做一个穿梭框，当数据被选中移入右边后需要带有编辑数据的功能，并且后端需要的数据是，新数据要显示在旧数据后面拼接一起给他。

样式代码:

 <div style="display: flex; justify-content: space-evenly; align-items: center">
            <a-card style="width: 320px; height: 400px; overflow: auto" title="所有字段">
              <a slot="extra" href="#">
                <a-checkbox :checked="leftAllChecked" :indeterminate="leftIndeterminate" @change="onCheckAllChange">{{
                  leftallFields.length }} /{{ analysisData.length }}项
                </a-checkbox>
              </a>
              <a-checkbox-group v-model="leftallFields" @change="LeftonChange">
                <a-row>
                  <a-col v-for="(item, index) in analysisData" :key="item" :span="24" style="padding: 5px 0px">
                    <a-checkbox :value="item" style="float: left"> {{ item }}</a-checkbox>
                  </a-col>
                </a-row>
              </a-checkbox-group>
            </a-card>
            <a-button type="primary" @click="moveToTarget">
              <a-icon type="right" />
            </a-button>
            <a-card style="width: 320px; height: 400px; overflow: auto" title="目标字段">
              <a slot="extra" href="#" style="color: rgb(29, 28, 28)">{{ targetFields.length }}项</a>
              <a-row>
                <a-col v-for="(item, index) in targetFields" :key="item" :span="24"
                  style="padding: 5px 0px; display: flex; align-items: center; justify-content: space-between">
                  <!-- 这里显示更改后的更改前的 -->
                  <div>{{ list[index] }}</div>
                  <a-button style="float: right" type="link" @click="showModal(item, index)">编辑</a-button>
                </a-col>
              </a-row>
            </a-card>
          </div>
        </div>

方法:

    //穿梭框 //拿到穿梭前勾选中的数组
    LeftonChange(checkedValues) {
      this.leftallFields = checkedValues
      if (this.leftallFields.length == this.analysisData.length) {
        //判断如果选中的长度和拿到的数据长度一样就把全选打开关闭单个选中
        this.leftAllChecked = true
        this.leftIndeterminate = false
      } else {
        this.leftIndeterminate = true
        this.leftAllChecked = false
      }
    },
    // 将选中字段从左侧移到右侧
    moveToTarget() {
      this.targetFields = this.targetFields.concat(this.list)//合并拼接的数组和左移动右
      // 使用 filter 方法来过滤第一个数组，保留在第一个数组中但不在第二个数组中的元素
      this.analysisData = this.analysisData.filter((item) => 
      !this.targetFields.includes(item))
      this.list = [...this.targetFields] //拿到右侧的数据
      this.Originally = [...this.targetFields] //拿到右侧的数据
      this.leftallFields = []
      this.leftAllChecked = false
      this.leftIndeterminate = false
    },
    //左边全选
    onCheckAllChange(e) {
      console.log(e.target.checked, 'jj')
      this.leftAllChecked = e.target.checked
      if (this.leftallFields.length == this.analysisData.length) {
        this.leftAllChecked = true
      }
      this.leftIndeterminate = false
      if (e.target.checked) {
        this.leftallFields = [...this.analysisData]
      } else {
        this.leftallFields = []
        this.leftAllChecked = false
      }
    },
    //右边数据编辑功能模态框关闭
    handleCancel() {
      this.visible = false
    },
    //打开编辑模态框
    showModal(name, index) {
      this.index = index
      this.text = name
      this.visible = true
    },
    //编辑关闭
    handleOk() {
      console.log(this.text)
      let { index, text } = this
      this.targetFields[index] = `${text}`
      let oldName = this.Originally[index]
      this.list[index] = `${oldName}(${text})` //将数据凭借传给后端
      console.log(this.list, '更改的数据')
      this.visible = false
    },

vue里data数据定义

      analysisData: [], //解析数组
      targetFields: [], //左边穿梭完数组（页面显示更改未拼接数组）1
      list: [], //更改后拼接的给后端传递的数组2
      Originally: [], //更改前的数组3
      leftallFields: [], //选中的数组还未穿梭前

总体逻辑就是需要在选中数据移动到右边穿梭框时，将数据保存为两个数据源数组，更改后的数组和原数组进行互相组合配合，组成需要的新数组，之后将新数组传给后端

踩坑点：数据在编辑完后如果没有穿梭回去的业务，就别去做把更改后的数据再传回去，否则会出现原数据丢失问题