Element UI table 实现直接编辑上下移动
Posted 长不大的大灰狼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Element UI table 实现直接编辑上下移动相关的知识，希望对你有一定的参考价值。
Element UI table 直接编辑、上下移动
一、直接编辑
演示：
代码示例：
<!DOCTYPE html>
<html >
<body>
<div id="app">
<el-row>
<el-col span="24">
<el-table size="mini" :data="master_user.data" border style="width: 100%" highlight-current-row>
<el-table-column type="index"></el-table-column>
<el-table-column v-for="(v,i) in master_user.columns" :prop="v.field" :label="v.title" :width="v.width">
<template slot-scope="scope">
<span v-if="scope.row.isSet">
<el-input size="mini" placeholder="请输入内容" v-model="master_user.sel[v.field]">
</el-input>
</span>
<span v-else>scope.row[v.field]</span>
</template>
</el-table-column>
<el-table-column label="操作" width="100">
<template slot-scope="scope">
<span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,true)">
scope.row.isSet?'保存':"修改"
</span>
<span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;">
删除
</span>
<span v-else class="el-tag el-tag--mini" style="cursor: pointer;" @click="pwdChange(scope.row,scope.$index,false)">
取消
</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-col span="24">
<div class="el-table-add-row" style="width: 99.2%;" @click="addMasterUser()"><span>+ 添加</span></div>
</el-col>
</el-row>
</div>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<!-- import javascript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
//id生成工具 这个不用看 示例而已 模拟后台返回的id
var generateId =
_count: 1,
get()return ((+new Date()) + "_" + (this._count++))
;
//主要内容
var app = new Vue(
el: "#app",
data:
master_user:
sel: null,//选中行
columns: [
field: "type", title: "远程类型", width: 120 ,
field: "addport", title: "连接地址", width: 150 ,
field: "user", title: "登录用户", width: 120 ,
field: "pwd", title: "登录密码", width: 220 ,
field: "info", title: "其他信息"
],
data: [],
,
,
methods:
//读取表格数据
readMasterUser()
//根据实际情况，自己改下啊
app.master_user.data.map(i =>
i.id = generateId.get();//模拟后台插入成功后有了id
i.isSet=false;//给后台返回数据添加`isSet`标识
return i;
);
,
//添加账号
addMasterUser()
for (let i of app.master_user.data)
if (i.isSet) return app.$message.warning("请先保存当前编辑项");
let j = id: 0, "type": "", "addport": "", "user": "", "pwd": "", "info": "", "isSet": true, "_temporary": true ;
app.master_user.data.push(j);
app.master_user.sel = JSON.parse(JSON.stringify(j));
,
//修改
pwdChange(row, index, cg)
//点击修改 判断是否已经保存所有操作
for (let i of app.master_user.data)
if (i.isSet && i.id != row.id)
app.$message.warning("请先保存当前编辑项");
return false;
//是否是取消操作
if (!cg)
if (!app.master_user.sel.id) app.master_user.data.splice(index, 1);
return row.isSet = !row.isSet;
//提交数据
if (row.isSet)
//项目是模拟请求操作 自己修改下
(function ()
let data = JSON.parse(JSON.stringify(app.master_user.sel));
for (let k in data) row[k] = data[k];
app.$message(
type: 'success',
message: "保存成功!"
);
//然后这边重新读取表格数据
app.readMasterUser();
row.isSet = false;
)();
else
app.master_user.sel = JSON.parse(JSON.stringify(row));
row.isSet = true;
);
</script>
</body>
</html>
二、上下移动
上下移动，实际就是操作数组list的顺序index：
<template v-slot="scope">
<el-button @click="upindex(scope.$index,scope.row)">上移</el-button>
<el-button @click="downindex(scope.$index,scope.row)">下移</el-button>
</template>
upindex(index, row)
if (index > 0)
let upDate = this.HotTableList[index - 1];
this.HotTableList.splice(index - 1, 1);
this.HotTableList.splice(index, 0, upDate);
else
this.$message.warning("已经是第一条了！");
return false;
,
downindex(index, row)
if (index + 1 === this.HotTableList.length)
this.$message.warning("已经是最后一条了！");
return false;
else
let downDate = this.HotTableList[index + 1];
this.HotTableList.splice(index + 1, 1);
this.HotTableList.splice(index, 0, downDate);
,
参考文章：
[1] element ui Table 点击编辑按钮，进行编辑示例
[2] Vue + element 实现table表格上下移动排序
以上是关于Element UI table 实现直接编辑上下移动的主要内容，如果未能解决你的问题，请参考以下文章
vue+element-ui 实现table单元格点击编辑，并且按上下左右键单元格之间切换
element-UI table动态增加列，动态增加行，动态合并行。选择编辑表头行数据