第一条不可上移,最后一条不可下移
<el-table-column label="操作" width="150">
<template slot-scope="scope">
<span
@click="handleCellEdit(scope.row, scope.$index)"
class="cell-cursor"
>编辑</span
>
<span
class="cell-cursor"
style="margin-left: 5px;"
@click="
handleMove(scope, 'up', dataInfo.Safeoperationlist)
"
:class="
scope.$index === 0 ? 'table-column-disable' : ''
"
>上移</span
>
<span
class="cell-cursor"
style="margin-left: 5px;"
@click="
handleMove(scope, 'down', dataInfo.Safeoperationlist)
"
:class="
scope.$index === dataInfo.Safeoperationlist.length - 1
? 'table-column-disable'
: ''
"
>下移</span
>
</template>
</el-table-column>
dataInfo.Safeoperationlist 是我的列表数据(改成自己的List就行)
//上下移动
handleMove(scope, moveType, list) {
const { $index } = scope;
if (moveType === 'up') {
if ($index === 0) return;
let isUp = list[$index - 1];
list.splice($index - 1, 1);
list.splice($index, 0, isUp);
} else {
if ($index === list.length - 1) return;
let isDown = list[$index + 1];
list.splice($index + 1, 1);
list.splice($index, 0, isDown);
}
},
style
.table-column-disable {
color: #dddd;
}