vue+element-ui实现穿梭框数据自定义排序
代码如下:依赖自行引入<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/element.css">&...
·
代码如下:依赖自行引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/element.css">
</head>
<body>
<div id="myData">
<el-transfer v-model="val" :data="myData" target-order="unshift"></el-transfer>
<div>
<el-button type="primary" @click="handleClick()">右侧数据倒序</el-button>
</div>
</div>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script>
var vm = new Vue({
el: "#myData",
data() {
return{
myData:[
{
disabled: false,
key: 1,
label: "test1"
},
{
disabled: false,
key: 2,
label: "test2"
},
{
disabled: false,
key: 3,
label: "test3"
},
{
disabled: false,
key: 4,
label: "test4"
},
{
disabled: false,
key: 5,
label: "test5"
}
],
val: []
}
},
methods:{
handleClick() {
this.val.reverse()
}
}
})
</script>
</body>
</html>
初次刷新页面结果如下:
点击左侧数据移动到右侧,移动一个就放在第一位,如图:
更多推荐
已为社区贡献7条内容
所有评论(0)