el-transfer 穿梭框

用到了jquery，所以需要下载jquery包，"jquery": "^3.6.0" 

<template>
  <div>
    选中的{{result}}---数据
    <el-transfer v-model="result" :data="transferData" filter-placeholder="冷冻盒编号" filterable :titles="['冷冻盒', '已选冷冻盒']" :render-content="renderFunc" :props="{ label: 'boxCode', key: 'id' }" :format="{
            noChecked: '${total}',
            hasChecked: '${checked}/${total}'
        }">
    </el-transfer>
  </div>

</template>

<script>
import $ from 'jquery'
export default {
  data () {
    return {
      result: [],
      transferData: [], // 穿梭框数据
      renderFunc (h, option) {
        return <div class="item-box">
          <div class="item-left">{option.boxCode}</div>
          <div class="item-right">{option.boxType}</div>
        </div>
      }
    }
  },
  mounted () {
    setDom()
    this.getTable()
  },
  methods: {
    // 查询盒子规格列表
    async getTable () {
      let list = [
        {
          boxCode: 'BOX00002652A1',
          id: 11,
          boxType: 1
        },
        {
          boxCode: 'BOX00002652A2',
          id: 12,
          boxType: 2
        },
        {
          boxCode: 'BOX00002652A3',
          id: 13,
          boxType: 3
        },
        {
          boxCode: 'BOX00002652A4',
          id: 14,
          boxType: 4
        },
        {
          boxCode: 'BOX00002652A5',
          id: 15,
          boxType: 5
        }
      ]
      list.map((item) => {
        item.boxType === 5 ? item.boxType = '6*6' : ''
        item.boxType === 1 ? item.boxType = '6*8' : ''
        item.boxType === 2 ? item.boxType = '8*12' : ''
        item.boxType === 3 ? item.boxType = '9*9' : ''
        item.boxType === 4 ? item.boxType = '10*10' : ''
      })
      this.transferData = list

    }
  }
}
function setDom () {
  const html = `<div class="he-box">
        <div class="he-left">冷冻盒编号</div>
        <div class="he-right">冷冻盒规格</div>
    </div>`
  $('div.el-transfer-panel__filter').after(html)

}
</script>

<style lang="less" scoped>
/deep/ .el-transfer-panel__filter {
  margin-bottom: 5px;
}
/deep/ .el-transfer-panel {
  width: 239px !important;
}
/deep/ .he-box {
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
}
/deep/ .item-box {
  display: flex;
  justify-content: space-between;
}
/deep/ .el-transfer-panel__body {
  height: 300px;
  .el-transfer-panel__list.is-filterable {
    height: 240px;
    padding-bottom: 15px;
  }
  .el-checkbox {
    margin-right: 10px;
    padding-left: 10px;
  }
}
/deep/ .el-transfer__buttons {
  padding: 0 10px;
}
/deep/ .el-transfer-panel {
  border: 1px solid #dcdfe6;
}
/deep/
  .el-transfer-panel
  .el-transfer-panel__header
  .el-checkbox
  .el-checkbox__label {
  font-size: 13px;
}
</style>