vue使用elementui实现表格中上下移动功能
程序员文章站
2022-07-14 17:05:54
...
html代码
<el-table :data="prodata">
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button @click="upLayer(scope.$index,scope.row)">上移</el-button>
<el-button @click="downLayer(scope.$index,scope.row)" >下移 </el-button>
</template>
</el-table-column>
</el-table>
js代码
upLayer(index, row) {
var that = this;
if (index == 0) {
that.$message({
message: "处于顶端,不能继续上移",
type: "warning"
});
} else {
let upDate = that.prodata[index - 1];
that.prodata.splice(index - 1, 1);
that.prodata.splice(index, 0, upDate);
}
},
downLayer(index, row) {
var that = this;
if (index + 1 === that.prodata.length) {
that.$message({
message: "处于末端端,不能继续下移",
type: "warning"
});
} else {
let downDate = that.prodata[index + 1];
that.prodata.splice(index + 1, 1);
that.prodata.splice(index, 0, downDate);
}
}
上一篇: Handler倒计时
推荐阅读
-
vue使用elementui实现表格中上下移动功能
-
vue使用elementui实现表格中上下移动功能
-
vue+elementui 数据表格上下移动功能
-
基于Vue2.0+ElementUI实现表格翻页功能
-
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
-
Vue2.0+ElementUI+PageHelper实现的表格分页功能
-
vue使用ElementUI时导航栏默认展开功能的实现
-
怎样使用Vue+canvas实现移动端手写板功能
-
在不使用select的情况下vue怎么实现下拉框功能
-
vue + ElementUI 封装的公用表格table组件实现拖拽列表功能(Sortablejs)