vue 数组元素通过 “前移”和‘后移’ 交换位置(l两种方法)
方法一:解构赋值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方法一:解构赋值</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
#app {
display: flex;
}
.m-left {
flex: 1;
padding: 20px;
margin: 20px;
border: 1px solid red;
}
.m-right {
flex: 1;
padding: 20px;
margin: 20px;
border: 1px solid #306fff;
}
.btn {
border: 1px solid #ddd;
padding: 2px 8px;
cursor: pointer;
}
table {
width: 100%;
table-layout: fixed;
}
table tr {
height: 40px;
line-height: 40px;
}
</style>
</head>
<body>
<div id="app">
<section class="m-left">
<table>
<thead>
<th v-for="(col, i) in cols" :key="i">{{col.name}}</th>
</thead>
<tbody></tbody>
</table>
</section>
<section class="m-right">
<table>
<tbody>
<tr v-for="(item, i) in list" :key="i">
<td><span>{{item.name}}</span></td>
<td><span class="btn" @click="up(i)">上移</span></td>
<td><span class="btn" @click="down(i)">下移</span></td>
<td><span class="btn" @click="del(i)">删除</span></td>
</tr>
</tbody>
</table>
<span class="btn" @click="add">添加一项</span>
</section>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: '表头1'},
{ id: 2, name: '表头2'},
{ id: 3, name: '表头3'},
{ id: 4, name: '表头4'},
]
},
computed: {
cols () {
// 这里可以根据具体需要构造cols,比如只需要某些列,在这里过滤即可
return this.list
}
},
methods: {
up (i) {
if(i <= 0) return
[this.list[i-1],this.list[i]] = [this.list[i],this.list[i-1]]
this.$forceUpdate()
},
down (i) {
if(i >= this.list.length - 1) return
[this.list[i+1],this.list[i]] = [this.list[i],this.list[i+1]]
this.$forceUpdate()
},
del (i) {
this.list.splice(i,1)
},
add () {
this.list.push({ id: this.list.length+1, name: `表头${this.list.length+1}`})
}
}
})
</script>
</body>
</html>
方法二:splice
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方法二:splice</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
#app {
display: flex;
justify-content: space-around;
}
.ul1,
.ul2 {
font-size: 24px;
font-weight: 700;
color: #333;
width: 800px;
border: 1px solid #ccc;
}
.li {
height: 50px;
line-height: 50px;
}
.li:nth-child(2n) {
background-color: rgb(243, 138, 138);
}
.btn1 {
background-color:rgb(171, 171, 235);
}
.btn2 {
background-color: rgb(193, 233, 183);
}
.btn1,
.btn2 {
float: right;
width: 120px;
}
.ul2 {
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="app">
<ul class="ul1">
<li class="li" v-for="item in ArrOne" :key="item.id" @click="handleOne(item)">
{{ item.value }}
</li>
</ul>
<ul class="ul2">
<li class="li" v-for="(item, index) in ArrTwo" :key="item.id">
{{ item.value }}
<span class="btn1" @click="up(index)" >Up</span>
<span class="btn2" @click="down(index)" >Down</span>
</li>
</ul>
</div>
<script>
let app = new Vue({
el:'#app',
data(){
return{
ArrOne: [
{ id:0, value:'虹猫'},
{ id:2 ,value:'蓝兔'},
{ id:3, value:'赖皮蛇'},
{ id:4, value:'肥鲶鱼'},
{ id:5, value:'小鲤鱼'}
],
ArrTwo: [],
}
},
methods:{
handleOne(item){
this.ArrTwo.push(item);
},
up(index){
console.log(index)
if(index != 0){
this.ArrTwo[index] = this.ArrTwo.splice(index - 1,1,this.ArrTwo[index])[0];
}else{
alert('已经是第一个数据了,不可以上移了')
}
},
down(index){
console.log(index)
if(index != this.ArrTwo.length-1){
this.ArrTwo[index] = this.ArrTwo.splice(index+1,1,this.ArrTwo[index])[0];
}else{
alert('已经是最后一个数据了,不可以下移了')
}
}
}
})
</script>
</body>
</html>