之前为了实现功能,网上找了一大堆各位前辈写的代码,还是整合了一下,适用于自己的代码
功能主要实现依赖vue的this.$set(target,obj,resourse)
<el-table
v-if="testShow"
ref="interfaceTable"
class="com-table"
:height="tableHeight"
v-loading="loading"
element-loading-text="正在处理数据请稍等..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
:data="structureList"
border
:highlight-current-row="true"
:row-class-name="tableRowClassName" //这个是关键
@row-click="rowClickFunc"
>
// 把每一行的索引放进row
//这一步不可少,上移下移是通过index去做的判定
tableRowClassName({ row, rowIndex }) {
var _this = this;
row.index = rowIndex;
if (_this.isTableActive) {
return "active-row ";
}
},
// 上移
handleUp() {
var _this = this;
//tableIndex 默认为0
if (_this.tableIndex == 0) {
_this.$message({
message: "处于顶端,不能继续上移",
type: "warning"
});
} else {
const len = _this.structureList[_this.tableIndex - 1];
this.$set(
_this.structureList,
_this.tableIndex - 1,
this.structureList[_this.tableIndex]
);
this.$set(_this.structureList, _this.tableIndex, len);
console.log(this.structureList);
this.$refs.interfaceTable.doLayout();
_this.tableIndex -= 1;
}
},
// 下移
handleDown() {
var _this = this;
if (_this.tableIndex + 1 === _this.structureList.length) {
_this.$message({
message: "处于末端,不能继续下移",
type: "warning"
});
} else {
const len = this.structureList[_this.tableIndex + 1];
this.$set(
this.structureList,
_this.tableIndex + 1,
this.structureList[_this.tableIndex]
);
this.$set(this.structureList, _this.tableIndex, len);
_this.tableIndex += 1;
}
},
可以直接拿去使用,有不懂或者需要源码的,可以私聊哈
vue+element实现表格上移下移
最新推荐文章于 2024-03-26 11:52:46 发布