用於後臺管理基於iview，vue的穿梭框
阿新 • • 發佈：2018-01-29
sort 首頁 ++ 第一個 color gin style 宋體 一個
引入文件：
<link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
<script src="//vuejs.org/js/vue.min.js"></script>
<script src="//unpkg.com/iview/dist/iview.min.js"></script>
html：
<div id="iviewTrasnsfer">
<transfer
:titles="titles"
:data="data_"
:target-keys="targetKeys1"
:render-format="render"
@on-change="handleChange"></transfer>
</div>
<script>
var Main = {
data() {
return {
titles: [‘源列表‘, ‘目的列表‘],
data_: this.getMockData(),
targetKeys1: this.getTargetKeys(),
}
},
methods: {
getMockData() {//源列表數據
let mockData = [];
let arr = [
{id: "1", sort: "首頁"},
{id: "2", sort: "用戶"},
{id: "3", sort: "充值"},
{id: "4", sort: "遊戲"},
{id: "5", sort: "推廣員"},
{id: "6", sort: "統計"},
{id: "7", sort: "站點"},
{id: "8", sort: "系統"},
{id: "9", sort: "擴展"},
{id: "10", sort: "主題"},
{id: "11", sort: "官網"},
{id: "12", sort: "退出"},
];
for (let i = 0; i < arr.length; i++) {
mockData.push({
key: arr[i].id,
label: arr[i].sort
});
}
return mockData;
},
getTargetKeys() {//目的列表數據,根據key篩選;
return this.getMockData()
.filter((item) => item.key > 8) //隨機設定條件，根據實際業務進行篩選
.map(item => item.key);
},
render(item) {
return item.label;
},
handleChange(newTargetKeys, direction, moveKeys) {//移動元素key,目的列表key,移動方向; important:根據key獲得移動的元素，目的列表數據；
let originalEle = [];
let targetEle = [];
function arr_dive(aArr,bArr){ //第一個數組減去第二個數組
if(bArr.length==0){return aArr}
var diff=[];
var str=bArr.join("""");
for(var e in aArr){
if(str.indexOf(aArr[e])==-1){
diff.push(aArr[e]);
}
}
return diff;
}
for (let i = 0; i < this.data_.length; i++) {
originalEle.push(this.data_[i].label);
//移動元素
if (this.data_[i].key == moveKeys)
{
console.log("移動元素：", this.data_[i].label);
}
//目標列表數據
for (var j = 0; j < newTargetKeys.length; j++)
{
if (this.data_[i].key == newTargetKeys[j])
{
targetEle.push(this.data_[i].label);
}
}
}
originalEle=arr_dive(originalEle,targetEle);
console.log("源列表元素：", originalEle);
console.log("目標列表元素：", targetEle);
this.targetKeys1 = newTargetKeys;
}
}
};
var Component = Vue.extend(Main)
new Component().$mount(‘#iviewTrasnsfer‘);
</script>
註：
1.基於vue;
2.根據key獲取源列表數據，目標列表數據；
3.例子中可以獲得移動的元素，移動的方向，列表數據，目標列表數據，
<script>
// 指引
// 1.網址: https://www.iviewui.com/components/transfer#高級用法
var Main = {
data() {
return {
titles: [‘源列表‘, ‘目的列表‘],
data_: this.getMockData(),
targetKeys1: this.getTargetKeys(),
}
},
methods: {
getMockData() {//源列表數據
let mockData = [];
let arr = [
{id: "1", sort: "首頁"},
{id: "2", sort: "用戶"},
{id: "3", sort: "充值"},
{id: "4", sort: "遊戲"},
{id: "5", sort: "推廣員"},
{id: "6", sort: "統計"},
{id: "7", sort: "站點"},
{id: "8", sort: "系統"},
{id: "9", sort: "擴展"},
{id: "10", sort: "主題"},
{id: "11", sort: "官網"},
{id: "12", sort: "退出"},
];
for (let i = 0; i < arr.length; i++) {
mockData.push({
key: arr[i].id,
label: arr[i].sort
});
}
return mockData;
},
getTargetKeys() {//目的列表數據,根據key篩選;
return this.getMockData()
.filter((item) => item.key > 8) //隨機設定條件，根據實際業務進行篩選
.map(item => item.key);
},
render(item) {
return item.label;
},
handleChange(newTargetKeys, direction, moveKeys) {//移動元素key,目的列表key,移動方向; important:根據key獲得移動的元素，目的列表數據；
let originalEle = [];
let targetEle = [];
function arr_dive(aArr,bArr){ //第一個數組減去第二個數組
if(bArr.length==0){return aArr}
var diff=[];
var str=bArr.join("""");
for(var e in aArr){
if(str.indexOf(aArr[e])==-1){
diff.push(aArr[e]);
}
}
return diff;
}
for (let i = 0; i < this.data_.length; i++) {
originalEle.push(this.data_[i].label);
//移動元素
if (this.data_[i].key == moveKeys)
{
console.log("移動元素：", this.data_[i].label);
}
//目標列表數據
for (var j = 0; j < newTargetKeys.length; j++)
{
if (this.data_[i].key == newTargetKeys[j])
{
targetEle.push(this.data_[i].label);
}
}
}
originalEle=arr_dive(originalEle,targetEle);
console.log("源列表元素：", originalEle);
console.log("目標列表元素：", targetEle);
this.targetKeys1 = newTargetKeys;
}
}
};
var Component = Vue.extend(Main)
new Component().$mount(‘#iviewTrasnsfer‘);
</script>
用於後臺管理基於iview，vue的穿梭框