vue-交互

最新推荐文章于 2024-05-31 18:07:12 发布
玲玲酱
最新推荐文章于 2024-05-31 18:07:12 发布
阅读量150
点赞数
分类专栏： vue 文章标签： vue
本文链接：https://blog.csdn.net/qq_45758587/article/details/110199201
版权
vue 专栏收录该内容
5 篇文章 0 订阅
订阅专栏
利用vue进行数据交互，实现增删改查
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
    <!-- 引入jQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- 放到vue引入链接之后 -->
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .search{
            margin-bottom: 10px;
        }
        /* 改变编辑 删除 图标样式 */
        .span,.span2{
            font-size: 20px;
            cursor: pointer;
        }
        .span{
            color: green;
            margin-right: 10px;
        }
        .span2{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="search">
            <el-button type="primary" size='small' @click='add'>新增</el-button>
        </div>
        <div class="content">
            <!-- 引入表格 -->
            <el-table
            :data="tableData"
            size='small'
            style="width: 100%">
            <el-table-column
              prop="id"
              label="编号"
              align='center'
              width="100">
            </el-table-column>
            <el-table-column
              prop="name"
              label="栏目名称"
              align='center'
              width="180">
            </el-table-column>
            <el-table-column
              align='center'
              label="父级栏目"
              width="180"
              >
                <!-- 当获取父级栏目时 有些数据没有父级栏目 所以不能直接获取parent.name 利用三目运算符进行筛选-->
                <template v-slot='scope'>
                    <span>
                        <!-- {{scope,row}} 显示每一条数据的详细信息-->
                        {{scope.row.parent?scope.row.parent.name:"无"}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
            prop="comment"
            align='center'
            label="描述">
          </el-table-column>
          <el-table-column
          align='center'
          width='200'
          label="操作">
         <template v-slot='{row}'>
            <i class="el-icon-edit span" title="修改" @click='edit(row)'></i>
            <i class="el-icon-delete span2" title="删除" @click='del(row.id)'></i>
         </template>
        </el-table-column>
         </el-table>
     </div>
        <!-- <div class="page"></div> -->

        <!-- 模态框开始 -->
        <!-- 将title写活 因为修改和新建共用一个模态框 通过this.title 弹出不同标题的模态框-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="栏目名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="描述" :label-width="formLabelWidth">
                <el-input v-model="form.comment" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button size='small' @click="dialogFormVisible = false">取 消</el-button>
              <el-button size='small' type="primary" @click="save">确 定</el-button>
            </div>
          </el-dialog>
        <!-- 模态框结束 -->
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                title:'',
                tableData: [],
                // 表单声明
                dialogFormVisible: false,
                form: {
                    // 接口中 name栏目名称 comment备注 no序号
                    name: '',
                    comment:'',
                    no:1
                },
                formLabelWidth: '120px'
            },
            created(){
                this.load()
            },
            methods:{
                // 保存
                save(){
                    // 关闭当前模态框
                    this.dialogFormVisible = false
                    // 保存传参 在后台数据中找到保存更新栏目信息
                    $.ajax({
                        url:'http://47.106.244.1:8099/manager/category/saveOrUpdateCategory',
                        type:'post',
                        data:this.form,
                        success:(r)=>{
                            // 刷新页面
                            this.load()
                            this.$message({
                                        type: 'success',
                                        message: '保存成功!'
                                    });
                        }
                    })
                },
                // 新增 --》对话框 嵌套的dialog表单
                add(){
                    this.title = '新增栏目'
                    // 点击新增时出现模态框
                    this.dialogFormVisible = true
                },

                // 删除
                del(oid){
                    // 从组件库中导入模块
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                        }).then(() => {

                            $.ajax({
                                url:'http://47.106.244.1:8099/manager/category/deleteCategoryById?id='+oid,
                                success:(r)=>{
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    // 重新加载数据
                                    this.load()
                                }
                            })

                        }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });          
                        });
                },

                // 修改
                edit(row){
                    this.title = '修改栏目'
                    // 接收row的数据 修改时需要获取信息
                    this.form.id = row.id 
                    this.form.name = row.name
                    this.form.comment = row.comment
                    // this.from = row  直接这样写会出现问题 在修改的同时原数据也会发生变化，这时点击取消时，数据已经发生了改变
                    // 点击修改时弹出模态框
                    this.dialogFormVisible = true
                },

                // 加载数据
                load(){
                    $.ajax({
                        url:'http://47.106.244.1:8099/manager/category/findAllCategory',
                        success:(r)=>{
                            // console.log(r)
                            this.tableData = r.data
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>
玲玲酱
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-交互

利用vue进行数据交互，实现增删改查<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> 
复制链接

扫一扫
专栏目录