这是下载实例地址:https://github.com/lixinmusic/transfer
先上效果图和需求:
需求:
效果图就是在这些了:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Transfer 穿梭框</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<style>
.el-table thead tr .el-checkbox__input {
display: none;
}
.moveRight {
text-align: center;
margin-top: 30px;
}
.moveLeft {
margin-top: 10px;
}
.moveTop {
margin-top: 10px;
}
.moveDown{
margin-top: 10px;
}
</style>
</head>
<body>
<div id="paik">
<el-row :gutter="20">
<el-col :span="10">
<span style="color:#606266;font-size:16px">规则列表:</span>
<el-table :data="tableData" border ref="selection1" :header-cell-style="{background:'oldlace',color:'#606266'}"
@selection-change="checkAll" style="width: 100%;">
<el-table-column align="center" type="selection" width="30">
</el-table-column>
<el-table-column prop="ruleChildId" align="center" label="ID" width="90">
</el-table-column>
<el-table-column prop="ruleChildType" label="规则类型" width="180">
<template slot-scope="scope">
<span v-if="scope.row.ruleChildType == 1">日期</span>
<span v-else-if="scope.row.ruleChildType == 2">大写英文顺序号</span>
<span v-else-if="scope.row.ruleChildType == 3">小写英文顺序号</span>
<span v-else-if="scope.row.ruleChildType == 4">数字顺序号</span>
<span v-else>固定码</span>
</template>
</el-table-column>
<el-table-column prop="name" label="格式" width="80">
<template slot-scope="scope">
<span v-if="scope.row.ruleChildId==5||scope.row.ruleChildId==6||scope.row.ruleChildId==7" class="cell-edit-input">
<el-input v-model="scope.row.name" maxlength="2" onInput="this.value=this.value.replace(/[^1-9]*$/,'')"></el-input>
</span>
<span v-if="!scope.row.ruleChildId==5||scope.row.ruleChildId==6||scope.row.ruleChildId==7" style="margin-left:10px;"
class="cell-icon" @click="handleEdit(scope.$index,scope.row)">
</span>
</template>
</el-table-column>
<el-table-column prop="address" label="位数" width="150">
</el-table-column>
</el-table>
</el-col>
<el-col :span="2.5">
<div class="moveRight">
<div @click="handelSelect">
<el-button icon="el-icon-arrow-right" :disabled="nowSelectData.length?false:true" size="mini" type="primary">
右移
</el-button>
</div>
<div class="moveTop" @click="moveTop()">
<el-button icon="el-icon-arrow-up" :disabled="nowSelectRightData.length?false:true" size="mini" type="primary">
上移
</el-button>
</div>
<div class="moveDown" @click="moveDown">
<el-button icon="el-icon-arrow-down" :disabled="nowSelectRightData.length?false:true" size="mini" type="primary">
下移
</el-button>
</div>
<div class="moveLeft" @click="handleRemoveSelect">
<el-button icon="el-icon-delete" :disabled="nowSelectRightData.length?false:true" size="mini" type="primary">
删除
</el-button>
</div>
</div>
</el-col>
<el-col :span="10">
<span style="color:#606266;font-size:16px">生成规则:</span>
<el-table :data="selectArr" border ref="selection" :header-cell-style="{background:'oldlace',color:'#606266'}"
@selection-change="checkRightAll" height="510px" @select="checkRightAll1" style="width: 100%">
<el-table-column align="center" type="selection" width="30">
</el-table-column>
<el-table-column prop="ruleChildId" align="center" label="ID" width="90">
</el-table-column>
<el-table-column prop="date" label="规则类型" width="180">
</el-table-column>
<el-table-column prop="name" label="格式" width="80">
</el-table-column>
<el-table-column prop="address" label="位数" width="150">
</el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.1/vue.min.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.3.9/index.js"></script>
<script src="tab.js"></script>
</html>
js代码:
var paik = new Vue({
el: "#paik",
data() {
return {
tableData: [
{
ruleChildId: 1,
date: "2016-05-02",
name: "王小",
address: "上海市",
ruleChildType:1
},
{
ruleChildId: 2,
date: "2016-05-04",
name: "王虎",
address: "上海市",
ruleChildType:1
},
{
ruleChildId: 3,
date: "2016-05-01",
name: "李三",
address: "上海",
ruleChildType:1
},
{
ruleChildId: 4,
date: "2016-05-03",
name: "武义",
address: "上海市",
ruleChildType:1,
},
{
ruleChildId: 5,
date: "2016-05-03",
name: "王大",
address: "上海市普陀区",
ruleChildType:2,
},
{
ruleChildId: 6,
date: "2016-05-03",
name: "张媛",
address: "上海",
ruleChildType:3,
},
{
ruleChildId: 7,
date: "2016-05-03",
name: "肖战",
address: "上海市普陀",
ruleChildType:4,
},
{
ruleChildId: 8,
date: "2016-05-03",
name: "凯立",
address: "上海市",
ruleChildType:1,
},
{
ruleChildId: 9,
date: "2016-05-03",
name: "尚武",
address: "上海市普",
ruleChildType:1,
},
{
ruleChildId: 10,
date: "2016-05-03",
name: "溥仪",
address: "上海市普",
ruleChildType:1,
}
],
orderNum:null,
selectArr: [], // 右边列表
nowSelectData: [], // 左边选中列表数据
nowSelectRightData: [] // 右边选中列表数据
};
},
created() {},
methods: {
checkAll(val) {
this.nowSelectData = val;
},
checkRightAll(val, row) {
},
checkRightAll1(val, row) {
if (val.length > 1) {
this.$refs.selection.clearSelection()
val.shift()
this.$refs.selection.toggleRowSelection(row)
} else {
this.nowSelectRightData = val;
console.log(this.selectArr);
this.selectArr.forEach((item, index) => {
item.orderNum = index
this.nowSelectRightData.forEach(spot => {
if (item.orderNum == spot.orderNum) {
this.orderNum = spot.orderNum
}
})
})
}
},
// 右移
handelSelect() {
this.nowSelectData.forEach(item => {
this.selectArr.push(JSON.parse(JSON.stringify(item)))
this.$refs.selection1.clearSelection()
this.nowSelectData = []
})
},
// 上移
moveTop() {
if (this.orderNum == 0) {
this.$message({
message: '已经是列表中第一行!',
type: 'warning'
})
this.$refs.selection.clearSelection()
this.nowSelectRightData = []
this.orderNum = null
return
}else{
const temp = this.selectArr[this.orderNum - 1]
Vue.set(this.selectArr, this.orderNum - 1, this.selectArr[this.orderNum])
Vue.set(this.selectArr, this.orderNum, temp)
this.$refs.selection.clearSelection()
this.nowSelectRightData = []
}
},
// 下移
moveDown() {
if (this.orderNum == (this.selectArr.length - 1)) {
this.$message({
message: '已经是列表中第一行!',
type: 'warning'
})
this.$refs.selection.clearSelection()
this.nowSelectRightData = []
this.orderNum = null
return
} else {
const po = this.selectArr[this.orderNum + 1]
Vue.set(this.selectArr, this.orderNum + 1, this.selectArr[this.orderNum])
Vue.set(this.selectArr, this.orderNum, po);
this.$refs.selection.clearSelection()
this.nowSelectRightData = []
}
},
// 删除
handleRemoveSelect(){
const i = this.$refs.selection.selection[0].orderNum
if (this.$refs.selection.selection) {
this.selectArr.splice(i, 1)
this.$refs.selection.clearSelection()
this.nowSelectRightData = []
}
},
}
});
这是在项目遇到的一个奇葩需求,但还是要完成,先记录一下后期会说明一下。。。。。