账号列表的删除编辑提交

最新推荐文章于 2024-11-04 16:17:23 发布

quanmeiren

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量794

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/quanmeiren/article/details/131911316

版权

该代码段展示了一个使用Vue.js实现的用户管理界面，包括账号列表、选择操作、编辑和删除功能，以及分页和批量删除。表格组件用于显示数据，同时支持事件处理如`handleSelectionChange`用于选择项操作，`edit`和`delete`方法处理编辑和删除用户，而`getinfo`用于获取用户信息。

摘要由CSDN通过智能技术生成

请添加图片描述

<template>
  <div>
    <plan title="账号列表">
      <!-- @selection-change="handleSelectionChange"添加这个属性就是点击可以得到你想要的value值 -->
      <el-table
        style="width: 100%"
        :data="list"
        @selection-change="handleSelectionChange"
        ref="table"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="日期" width="120">
          <template slot-scope="scope">{{ scope.row.ctime |dataFormat}}</template>
        </el-table-column>
        
        <el-table-column prop="account" label="账号" width="120"></el-table-column>

        <el-table-column label="管理员" prop="userGroup"></el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="deletes(scope.row)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="alldel">批量删除</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>

      <el-pagination
        :current-page="pageinfo.currentPage4"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="pageinfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
     <!-- 弹出框 -->
      <el-dialog title="修改用户信息" :visible.sync="isshow" width="30%">
        <el-form ref="form" label-width="80px" size="mini" :model="listone">
          <el-form-item label="账号" prop="account">
            <el-input v-model="listone.account"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="isshow = false">取 消</el-button>
          <el-button type="primary" @click="sumit">确 定</el-button>
        </span>
      </el-dialog>
    </plan>
  </div>
</template>

<script>
import {
  usersList,
  usersEditApi,
  usersBatchdelApi,
  usedel
} from "@/api/account.api";
export default {
  data() {
    return {
      pageinfo: {
        currentPage: 1,
        pageSize: 5
      },
      ruleForm: {
        account: "",
        password: "",
        userGroup: ""
      },
      list: [],
      listone: {},
      total: 0,
      isshow: false,
      ids: [],
      id: ""
    };
  },
  created() {
    this.getinfo();
  },
  methods: {
    // 批量删除
    handleSelectionChange(val) {
      this.ids = val.map(item => item.id);
    },
    alldel() {
      usersBatchdelApi(this.ids).then(res => {
        console.log(res);
        this.getinfo();
      });
    },

    // 获取用户信息
    async getinfo() {
      const res = await usersList(this.pageinfo);
      this.total = Number(res.data.total);
      this.list = res.data.data;
    },
    //  编辑
    edit(val) {
      this.listone = { ...val };
      this.isshow = true;
    },
  //  删除
    deletes(val) {
      this.id = val.id;
      usedel(this.id).then(res => {
        console.log(res);
        this.getinfo();
      });
    },

    toggleSelection() {
      this.$refs.table.clearSelection();
    },

    sumit() {
      usersEditApi(this.listone).then(res => {
        if (res.data.code === 0) {
          this.isshow = false;
          this.getinfo();
        }
      });
    },

    handleSizeChange(val) {
      this.pageinfo.pageSize = val;
      this.getinfo();
    },
    handleCurrentChange(val) {
      this.pageinfo.currentPage = val;
      this.getinfo();
    }
  }
};
</script>

<style lang="scss" scoped>
</style>