穿梭框

说明

1、穿梭框基于第三方表格组件库 vxe-table (opens new window) 的vxe-list和element-ui (opens new window)的el-checkbox，el-button组件进行的二次封装。
2、主要解决由于js是单线程，穿梭框数据量如果过大会导致运行慢，页面卡顿，甚至崩溃的问题。
3、核心内容:数据对比主要使用了vue-worker (opens new window)第三方组件库，进行多线程处理。

使用

<template>
  <div class="app-container userDiv" style="background-color:#ffffff;">
    <vs-transfer
      :all-list="listData"
      key-id="modelId"
      :selected-list.sync="checkData"
    >
      <template v-slot="{ row }">
        <div>
          {{ row.name }}
        </div>
      </template>
    </vs-transfer>
  </div>
</template>

<script>
import VsTransfer from '@/components/vsTransfer'
export default {
  name: 'Test',
  components: {
    VsTransfer
  },
  data() {
    return {
      listData: [
        {
          modelId: 1,
          name: '轨道-道床-1'
        },
        {
           modelId: 2,
           name: '轨道-道床-2'
        },
        {
           modelId: 3,
           name: '轨道-道床-3'
        },
        {
           modelId: 4,
           name: '轨道-道床-4'
        },
        {
           modelId: 5,
           name: '轨道-道床-5'
        },
        {
           modelId: 6,
           name: '轨道-道床-6'
        }
      ],
      checkData: []
    }
  },
  mounted() {},
  methods: {}
}
</script>

参数说明

属性

属性	描述	类型	可选值	默认值
height	组件高度	number	—	400
allList	所有数据列表	Array[]	—	[]
selectedList	选中的数据列表	Array[]	—	[]
keyId	数据对比参数的名称	string	—	id

Slot

name	说明
row	自定义每条数据显示的内容，参数为{row}

组件源码及综合示例参考

组件源码 (opens new window)综合示例 (opens new window)