vue表格分页以及增删改查的实际应用

素颜马尾好姑娘i 2022-10-22 12:00 152阅读 0赞

效果  
1：表格以及分页

![62efcc678b5493b1b163e7007e100bae.gif][]

2：增加一条数据

![ee9843c8066c58370aea9d33b8f5d7fe.gif][]

3：删除一条数据

![76f83bd61051a06d0126328a33e01706.gif][]

4：修改一条数据

![68b2904e7569d7e18aff97ce43c0056b.gif][]

5：查询一条数据

![a9f158ae76ebe2f2a690e0ac4f89ea15.gif][]

实例：

<template>
      <div class="tab-container">
        <div class="filter-container" style="margin-bottom: 20px">
          <el-input
            maxlength="40"
            placeholder="用户名"
            style="width: 200px"
            class="filter-item"
            v-model="searchContent"
            @keyup.enter.native="handleFilter"
          />
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="searchContList"
            >搜索
          </el-button>
    
          <el-button
            class="filter-item"
            style="margin-left: 10px"
            type="primary"
            icon="el-icon-edit"
            @click="handleCreate"
            >新增用户
          </el-button>
        </div>
    
        <el-table
          :data="pvData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
          border
          fit
          highlight-current-row
          style="width: 100%"
        >
          <el-table-column
            prop="userName"
            label="用户名"
            width="180"
          ></el-table-column>
    
          <el-table-column prop="realName" label="姓名"></el-table-column>
          <el-table-column prop="sex" label="性别"  :formatter="formatSex"></el-table-column>
          <el-table-column prop="organName" label="所属部门"></el-table-column>
          <el-table-column prop="authority" label="权限"></el-table-column>
          <el-table-column prop="roleName" label="角色"></el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="230"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row, $index }">
              <el-button type="primary" size="mini" @click="handleUpdate(row)"
                >编辑</el-button
              >
              <el-button
                v-if="row.status != 'deleted'"
                size="mini"
                type="danger"
                @click="handleDelete($index, row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
    
        <el-pagination
          style="margin: 12px 0px"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pvData.length"
        >
        </el-pagination>
        
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
          <el-form
            :model="questionForm"
            ref="dataForm"
            label-position="left"
            label-width="90px"
            style="width: 400px; margin-left: 50px"
          >
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="questionForm.userName" />
            </el-form-item>
            <el-form-item label="昵称" prop="realName">
              <el-input v-model="questionForm.realName" />
            </el-form-item>
    
            <el-form-item label="性别">
              <el-select
                v-model="questionForm.sex"
                class="filter-item"
                placeholder="选择性别"
                style="width:100%"
              >
                <el-option
                  v-for="item in sexOptions"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
    
            <el-form-item label="角色">
              <el-select
                v-model="questionForm.roleName"
                class="filter-item"
                placeholder="选择角色"
                style="width:100%"
              >
                <el-option
                  v-for="item in roleNameOptions"
                  :key="item.key"
                  :label="item.label"
                  :value="item.key"
                />
              </el-select>
            </el-form-item>
    
            <el-form-item label="部门">
              <el-select v-model="questionForm.organName" placeholder="请选择"  style="width:100%" >
                <el-option
                  v-for="item in getOrganList"
                  :key="item.id"
                  :label="item.organName"
                  :value="item.id"
                  
                >
                </el-option>
              </el-select>
            </el-form-item>
    
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="questionForm.password" />
            </el-form-item>
            <el-form-item  label="密码确认" prop="password">
              <el-input  type="password" v-model="questionForm.password" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button
              type="primary"
              @click="dialogStatus === 'create' ? createData() : updateData()"
              >确定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </template>
    <script>
    //调用接口
    import {
      getQuerycheckList,
      saveSubject,
      updateSubject,
      deleteSubject,
      getOrgan,
    } from "@/api/permission/user";
    
    export default {
      data() {
        return {
          // 分页
          currentPage: 1, //初始页
          pagesize: 5, //    每页的数据
          total: 0,
          searchContent: "",
          //规则
          input: "",
          dialogPvVisible: false,
          questionForm: {
            userName: "",
            realName: "",
            organId: 1,
            organName: "",
            // sex: 1,
            sex: [],
            roleId: 1,
            roleName: "",
            authority: 1,
            password: "",
            companyId: 1,
          },
    
          sexOptions: [
            { label: "男", key: 1 },
            { label: "女", key: 0 },
          ],
          roleNameOptions: [
            { label: "管理员", key: 1 },
            { label: "普通用户", key: 0 },
          ],
    
          activeName: "CN",
    
          dialogFormVisible: false,
          dialogStatus: "",
          textMap: {
            update: "编辑",
            create: "添加",
          },
    
          pvData: [],
          getOrganList: [],
        };
      },
      watch: {},
      created() {
        //加载用户列表信息接口
        this.getQuerycheckList();
        //加载部门
        this.getOrgan();
      },
      methods: {
        // 初始页currentPage、初始每页数据数pagesize和数据data
        handleSizeChange: function (size) {
          this.pagesize = size;
          console.log(this.pagesize); //每页下拉显示数据
        },
        handleCurrentChange: function (currentPage) {
          this.currentPage = currentPage;
          console.log(this.currentPage); //点击第几页
        },
    
        // 查询按钮
        searchContList() {
          this.getQuerycheckList();
        },
        //查询题目列表信息接口
        getQuerycheckList() {
          const params = {
            // userName: "",
            organId: 1,
            userOrganId: 1,
            authority: 0,
            page: 1,
            rows: 5,
            isPagination: false,
    
    
    
          };
          // //题目内容的参数
          
          if(this.searchContent){
          params.userName= this.searchContent
          }
         
          this.dataLoading = true;
          getQuerycheckList(params).then((res) => {
            console.log("查询题目列表信息", res);
            this.pvData = res.data;
            // this.total=res.data.questionCount;
            // this.questionNormalCount=res.data.questionNormalCount;
            this.dataLoading = false;
          });
        },
    
        //获取部门信息接口定义
        getOrgan() {
          const params = {
            organId: 1,
            authority: 1,
          };
    
          this.dataLoading = true;
          getOrgan(params).then((res) => {
            console.log("查询部门列表信息", res);
            this.getOrganList = res.data.organs;
    
            this.dataLoading = false;
          });
        },
    
        handleModifyStatus(row, status) {
          this.$message({
            message: "操作Success",
            type: "success",
          });
          row.status = status;
        },
        //新增表单里面的值
        handleCreate() {
          this.questionForm = {
            userName: "",
            realName: "",
            organId: 1,
            organName: "",
            sex: undefined,
            roleId: 1,
            roleName: "",
            authority: 1,
            password: "",
    
            companyId: 1,
          };
          this.dialogStatus = "create";
          this.dialogFormVisible = true;
          this.$nextTick(() => {
            this.$refs["dataForm"].clearValidate();
          });
        },
    
        //添加用户
        async createData() {
          let form = null;
          if (!this.questionForm.userName) {
            this.$message({
              message: "必须填写用户名",
              type: "error"
            });
            return;
            }
            if (!this.questionForm.realName) {
            this.$message({
              message: "必须填写用户昵称",
              type: "error"
            });
            return;
            }
          form = this.questionForm;
          const params = form;
          const res = await saveSubject(params);
          console.log(res);
          if (res.code === 1) {
            this.$message({
              type: "info",
              message: "保存成功",
            });
            this.dialogFormVisible = false;
            this.getQuerycheckList();
            return;
          }
          this.$message({
            type: "error",
            message: "保存失败",
          });
        },
    
        //编辑弹出框
        handleUpdate(row) {
          this.questionForm = row;
          this.getQuerycheckList();
          this.dialogStatus = "update";
          this.dialogFormVisible = true;
          this.$nextTick(() => {
            this.$refs["dataForm"].clearValidate();
          });
        },
        updateData() {
          const params = {
            userName: this.questionForm.userName,
            realName: this.questionForm.realName,
            organId: 1,
            organName: this.questionForm.organName,
            sex: 1,
            roleId: 1,
            roleName: this.questionForm.roleName,
            authority: 1,
            password: this.questionForm.password,
    
            companyId: 1,
            id:this.questionForm.id
          };
    
          updateSubject(params).then((res) => {
            console.log(res);
            this.$notify({
              title: "Success",
              message: "更新成功",
              type: "success",
              duration: 2000,
            });
            this.dialogFormVisible = false;
            this.getQuerycheckList();
          });
        },
        //调用删除接口
        handleDelete(index, row) {
          const params = {
            id: row.id,
          };
          this.dataLoading = true;
          deleteSubject(params).then((res) => {
            this.$notify({
              message: "删除成功",
              type: "success",
              duration: 2000,
            });
            this.getQuerycheckList();
            console.log(this.pvData);
            this.dataLoading = false;
          });
        },
        //格式化性别
        formatSex(row, column) {
        return row.sex === 1? "男" : "女";
        }
      },
    };
    </script>
    <style scoped>
    .tab-container {
      margin: 30px;
    }
    </style>

[62efcc678b5493b1b163e7007e100bae.gif]: /images/20221022/7a5f7c99ca28422e9e5d771a100d403c.png
[ee9843c8066c58370aea9d33b8f5d7fe.gif]: /images/20221022/252f10141595497dabb70f88adf61d33.png
[76f83bd61051a06d0126328a33e01706.gif]: /images/20221022/0b81d6c3e0c84351b3932260c281edc7.png
[68b2904e7569d7e18aff97ce43c0056b.gif]: /images/20221022/9fe4dc355b1442929d1aada1133a91ba.png
[a9f158ae76ebe2f2a690e0ac4f89ea15.gif]: /images/20221022/76793d67940049f0b5dc1edcbee1ea81.png