原

elementui 表格解析与删除等

5472人阅读 2021/11/30 12:14 总访问：852017 评论：0 收藏：0 手机

分类: 前端

前端：

<!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);
}