elementui 表格解析与删除等
电脑版发表于：2021/11/30 12:14
前端：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="content">
<el-table :data="userinfo"
style="width: 100%">
<el-table-column type="selection" align="center"
width="55">
</el-table-column>
<el-table-column prop="Id"
label="Id"
width="180">
</el-table-column>
<el-table-column prop="UserName"
label="姓名"
width="180">
</el-table-column>
<el-table-column prop="Number"
label="学号">
</el-table-column>
<el-table-column prop="UserClass"
label="班级">
</el-table-column>
<el-table-column label="状态">
<template slot-scope="scope">
<div v-if="scope.row.CheckType==1"><el-tag>审核成功</el-tag></div>
<div v-else-if="scope.row.CheckType==2"><el-tag type="success">正在审核</el-tag></div>
<div v-else><el-tag type="danger">审核失败</el-tag></div>
</template>
</el-table-column>
<el-table-column fixed="right"
label="操作"
width="100">
<template slot-scope="scope">
<el-button @@click="handlerRemove(scope)" type="text" size="small">删除</el-button>
<el-button type="text" size="small">修改</el-button>
</template>
</el-table-column>
</el-table>
<div class="block" style="margin-top:15px">
<span class="demonstration"></span>
<el-pagination layout="total,prev, pager, next"
:page-size="pagesize"
:total="allpage"
background
@@current-change="handlerPage">
</el-pagination>
</div>
</div>
</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var vm = new Vue({
el: "#content",
data: {
userinfo: [],
allpage: 100,
pagesize: 9
},
methods: {
handlerRemove: function (datas) {
console.log(datas);
//alert("删除");
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true
}).then(() => {
//--------------执行删除
var th = this;
$.get("/Vue/deleteUser", { id: datas.row.Id }, function (row) {
if (row >= 1) {
th.$message({
type: 'success',
message: '删除成功!'
});
//getdata(1);
//修改数据源，页面会自动修改
th.$data.userinfo.splice(datas.$index, 1)
} else {
th.$message({
type: 'info',
message: '已取消删除'
});
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
handlerPage: function (val) {
getdata(val);
}
}
});
var getdata = function (val) {
$.get('/vue/GetUserInfo', { page: val }, function (result) {
vm.userinfo = result.userInfos;
vm.$data.allpage = result.allcount;
})
}
getdata(1);
</script>后端：
public ActionResult deleteUser(int id)
{
OAEntities entity = new OAEntities();
UserInfo info = entity.UserInfo.Where(a => a.Id == id).FirstOrDefault();
if (info != null)
{
entity.UserInfo.Remove(info);
}
int row = entity.SaveChanges();
return Json(row, JsonRequestBehavior.AllowGet);
}