Custom-transfer NPM

custom-transfer

介绍

基于 vue2+element-ui 自定义的穿梭框、切换左侧数据源保留右侧数据、可以对数据进行过滤

使用方式 cdn

https://cdn.jsdelivr.net/npm/custom-transfer

使用方式 npm

npm i custom-tramsfer -S

main.js

import Vue from "vue";
import App from "./App.vue";
import customTransfer from "custom-transfer";
import "custom-transfer/custom-transfer.css";
Vue.use(customTransfer);
new Vue({
	el: "#app",
	render: h => h(App),
});

在线体验

https://mygirs.github.io/transfer-demo/index.html

源码地址

https://github.com/MyGirs/custorm-transfer

Attributes

参数	说明	类型	默认值
sourceList	数据源	Array	[]
leftButtonText	左边按钮文案	String	到左边
rightButtonText	右边按钮文案	String	到右边
leftText	左边全选文案	String	全选
rightText	右边全选文案	String	全选
leftIcon	左边按钮 icon	String	el-icon-arrow-left
rightIcon	右边按钮 icon	String	el-icon-arrow-right
pageSize	分页显示数 isPaging=true 的时候有效	Number	20
isPaging	是否分页	Boolean	true
options	配置项 index 用于排序 name 展示名称 parent 对应的父级节点 id 唯一标识这些参数必有	Object	{ index: "index", name: "name", parent: "parent", id: "id" }

Methods

事件名称	说明	参数
clearSelectedList	清空右侧数据
clearSelectedValue	清除右侧勾选状态
getSelectedValue	获取右侧勾选数据	返回 selectedIdList Array
getSelectedList	获取右侧数据	返回 selectedList Array

穿梭框 element-ui vue2

@everything-registry/sub-chunk-1429

7 months ago

7 months ago

7 months ago

8 months ago