el-Transfer 穿梭框重写左右拖拽及排序组件
1.适用组件:
导入,注册组件,然后使用
<DragTransfer v-model="rightData" leftTitle="未选择字段" rightTitle="已选择字段" :props="transferProps" :data="data" >参数解释:
v-model="rightData" 右边已选择的数据 :data="data" 所有数据,左边和右边一起的数据 leftTitle="未选择字段" 左边标题 rightTitle="已选择字段" 右边标题 :props="transferProps" 字段映射vue data中定义:
transferProps: { value: "rfidSetId", label: "rfidSetName", },
2.左右拖拽组件:
src/components/DragTransfer.vue
{{ leftTitle }}<div id="left" class="drag-transfer-item" @drop="drop" @dragover="allowDrop" > for="(item, index) in leftData"> <div :key="index" class="drag-transfer-item-name" draggable="true" @dragstart="dragstart" :id="item[props['value']]" > {{ item[props["label"]] }}{{ rightTitle }}<div id="right" class="drag-transfer-item" @drop="drop" @dragover="allowDrop" > for="(item, index) in rightData"> <div :key="index" class="drag-transfer-item-name" draggable="true" @dragstart="dragstart" :id="item[props['value']]" > {{ item[props["label"]] }}