账号列表的删除编辑提交

这篇具有很好参考价值的文章主要介绍了账号列表的删除编辑提交。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

账号列表的删除编辑提交,javascript,开发语言,ecmascript文章来源地址https://www.toymoban.com/news/detail-607689.html

<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>

到了这里,关于账号列表的删除编辑提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 开发语言漫谈-JavaScript

           JavaScript、Java名字很相近,但它们没有任何亲缘关系,是由不同公司开发的编程语言。Java由Sun公司(后被Oracle收购)开发,JavaScript最初是由Netscape公司开发的(当年浏览器的霸主)。JavaScript最初的名字是 LiveScript,Netscape将其命名为 JavaScript,无非是蹭 Java流量。当

    2024年04月16日
    浏览(50)
  • Flask 账号管理列表

    这段代码是一个Flask应用的路由部分,主要用于处理用户请求并返回相应的响应。下面是对代码的详细介绍: 请注意: User 表中的 nickname 字段包含r eq[‘mix_kw’] 变量的值(即 模糊匹配 )。 User 表中的 mobile 字段包含 req[‘mix_kw’] 变量的值(即模糊匹配)这段代码只是构建了

    2024年02月04日
    浏览(28)
  • Linux 用户账号管理-删除账号

    在Linux系统中,用户账号的删除是非常重要的一项工作。本文将介绍Linux系统中删除用户账号的方法,包括命令行语法、实操和各种删除用户账号方法之间的区别,仅介绍删除普通用户。 在Linux系统中,删除用户账号使用userdel命令,其语法为: 其中,方括号内的为可选项,可

    2024年02月16日
    浏览(49)
  • 【git笔记】每次提交都要输入账号密码

    解决 :这是因为使用了https连接到仓库的原因,只需把原本使用HTTPS的方式改为使用SSH的方式即可。 学习把本地项目托管到Gitee 参考下面网址 https://blog.csdn.net/qq_46450354/article/details/127600066#h5o-13 安装以上网址进行操作,用的就是HTTPS连接方式。 【具体把 使用HTTPS的方式改为使

    2024年02月06日
    浏览(58)
  • 解决每次提交代码都需要输入账号和密码的问题

    第一步:进入项目目录,在 git 终端执行以下命令: 第二步:重新执行一次git pull,这次它还是提示你输入账号和密码: 后面再 pull 或者 push 的时候,就不用输入账户和密码了。 注意,如果你换了git账号,或者你换了电脑,执行完 \\\"git config --global credential.helper store\\\" 再 \\\"git

    2024年02月15日
    浏览(59)
  • 删除本地git账号信息

    一、打开控制面板 二、打开用户账户 三、打开管理Windows凭证 四、打开后找到与git相关的凭证,删除这些凭证即可清除git登录信息

    2024年02月11日
    浏览(40)
  • 建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

    建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— 网络协议 建站系列(四)— Web服务器之Apache、Nginx 建站系列(五)— 前端开发语言之HTML、CSS、JavaScript 建站系列(六)— 后端开发语言 建站系列(七)— 常用前后端框架

    2024年02月09日
    浏览(57)
  • Jenkins获取git文件变更列表、提交ID、提交人、提交信息

    GitLab 事件触发 Jenkins 构建只是一个启动信号,获取变更文件列表需要知晓上一次构建时某个仓库的版本号,这里 Jenkins 的插件 git-plugin 已经帮我们实现了这部分工作。所以只需要通过 git-plugin 检出代码即可。 检出代码 请自行替换 $branchName 为分支名, $relativeTarget 为检出相对

    2024年02月11日
    浏览(47)
  • 关于Gitee如何创建仓库和配置本地绑定账号以及如何提交本地代码。

    第一步: 登录Gitee.com开始注册账号。 第二步 : 登录进去以后,创建一个仓库并绑定邮箱。 第三步: 安装git工具,安装完毕后,鼠标右键会出现两个选项 第四步:   接下来就开始配置git的本地文件,首先需要建立一个空文件夹,来当做一个本地仓库,在此文件夹的路径下

    2024年02月14日
    浏览(45)
  • [HTML]Web前端开发技术2(HTML5、CSS3、JavaScript )格式化文本标记,定义列表,<blockquote>,definition description,ruby——喵喵画网页

    希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,大大会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 格式化文字与段落 Web页面设计原则 向Web页面添加文字信息 格式化文本标记 标题字标记 添加空格与特

    2024年02月05日
    浏览(102)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包