element.ui增删改

最新推荐文章于 2023-09-24 21:35:14 发布
最新推荐文章于 2023-09-24 21:35:14 发布
阅读量314 收藏
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vue1024/article/details/108866409
版权

一级目录

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>同学录</title>
    <!-- <link rel="stylesheet" href="./style/index.css"> -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        #app {
            width: 1024px;
            margin: 0 auto;
        }
        
        .add-btn {
            margin-top: 20px;
            width: 100%;
        }
        
        .body {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>同学录</h1>
        <div class="head">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="userInfo.name" placeholder="请输入姓名"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="userInfo.sex" placeholder="请输入性别"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="userInfo.del" placeholder="请输入电话号码"></el-input>
                </el-col>
                <el-col :span="6">
                    <el-date-picker v-model="userInfo.day" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期">
                    </el-date-picker>
                </el-col>
            </el-row>
            <el-button type="primary" class="add-btn" @click="addUser">添加</el-button>
        </div>
        <div class="body">
            <template>
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="date"
            label="序号"
            width="180">
            <template slot-scope="scope">
              {{scope.$index + 1}}
            </template>
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="sex" label="性别">
            </el-table-column>
            <el-table-column prop="del" label="电话号码">
            </el-table-column>
            <el-table-column prop="day" label="生日">
            </el-table-column>
            <el-table-column prop="caozuo" label="操作">
                <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" @click="editUser(scope.row,scope.$index)" circle></el-button>
                <el-button type="danger" icon="el-icon-delete" @click="delUser(scope.$index)" circle></el-button>
              </template>
            </el-table-column>
            </el-table>
            </template>
        </div>
        <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <div>
                <el-form ref="form" :model="obj" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="obj.name"></el-input>
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-input v-model="obj.sex"></el-input>
                    </el-form-item>
                    <el-form-item label="电话号码">
                        <el-input v-model="obj.del"></el-input>
                    </el-form-item>
                    <el-form-item label="生日">
                        <el-date-picker v-model="obj.day" type="date" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirm">确 定</el-button>
        </span>
        </el-dialog>


    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./javascript/index.js">
</script>

</html>
Vue1024
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue基于 element-ui 实现菜单动画效果，任意添加 li 个数均匀撑满 ul 宽度
weixin_33693070的博客
05-14 6169
鼠标移至图标上时使用toolTip显示对应的中文提示文字<template> <div class="em_tool"> <win :id="win.id" :data="win"> <div class="nav"> <input type="checkbox" class="nav__cb" id="menu...
elementUI样式修改（Cascader 级联选择器）
热门推荐
qq_40043424的博客
06-13 2万+
elementui的问世，大大提高了前端开发的工作效率，但同时也 带给我们不少烦恼。我们要用UI组件就免不了要对它做一些个性化定制需求，所以我们就必须要覆盖element的一些样式 下面是我开发中遇到的实例： 首先引入Cascader级联选择器，效果如图： 很明显这个样式不是我们需要的，那么就需要处理了… ：附上控制台中的html 接下来，我在单页面组件下面新建style，然后改变它的样式 ....
记一次对elementUI列表的封装
qq_39057117的博客
08-02 1177
刚学了vue，看了下elementUI的组件，自己写着玩。 基本需求如下 单选全选框、分页 类似iview一样通过传入选项数组来定制表头，传入数据数组来控制表格内容 单选全选分页就不多说了，就是用element自己的组件 这是官网列表的写法 <el-table ref="multipleTable" :data="tableData" tooltip-effe...
ElementUI基本介绍及登录注册案例演示
最新发布
ChatYU的博客
09-24 5018
Element UI 是一个基于 Vue.js 的开源前端框架，用于构建用户界面。它提供了一套丰富的 UI 组件和工具，可以帮助开发者快速构建现代化的 web 应用程序。基于 Vue.js：Element UI 是专门为 Vue.js 框架设计的，因此与 Vue.js 集成非常紧密。这使得开发者可以轻松地将 Element UI 的组件嵌入到他们的 Vue.js 应用程序中。丰富的 UI 组件：Element UI 提供了一系列常用的 UI 组件，包括按钮、表单、对话框、导航菜单、数据表格、图表等等。
Vue的element-ui组件的使用
xuezhedaren的博客
11-20 218
话不多说直接上代码 <template> <div class="container-alyer"> <el-container> <el-header>我是头部</el-header> <el-main> <h4 ...
element-ui tree结构实现增删改自定义功能代码
10-14
主要介绍了element-ui tree结构实现增删改自定义功能代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-element-ui-demo:一个基于vue+element的后台增删查改小demo
04-28
一个基于vue+element(饿了么团队开发的vueui框架)的增删查改小demo Build Setup npm install npm run dev phpdemo在index.php中,实际运行需要为php文件设立域名,并修改ajaxurl 然后....是的,我懒到不想用数据库了......
Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作
10-14
主要介绍了Element-ui树形控件el-tree自定义增删改和局部刷新及懒加载操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
＜ elementUi 下拉选择框组件 树状部门选择（ 多选/单选 ）＞
一个平平无奇的技术宅
04-08 1万+
文章目录前言一、树状部门数据 下拉框单选实现代码：> 组件代码 （ 父 ）> 组件代码 （ 子 ）二、树状部门数据 下拉框单选解释：多选和单选的代码差不多，就不做庸余的复制粘贴了。总结 前言 在前端开发中，平时在填写表单中，可能会遇到需要展示选择树状数据的表单组件。但是在element中，并未提供能够处理树状数据选择的 select 选择框组件。所以就此，小温在开发中遇到类似的问题，封装了elementUi 的 select选择框组件。接下来给大家讲述一下！ 希望能给大家一些帮助！ 提示：以
vue+elementui动态生成侧拉导航栏
a_b_ccv的博客
11-09 2871
# vue+elementui动态生成侧拉导航栏 # 一共两种办法,根据情况而定,首先第一种 首先,拿到菜单树结构数据 nav: [ { icon: "el-icon-s-platform", title: "首页", path: "/welcome" }, { icon: "el-icon-s-operation", title: "test",
vue + elementui工作中常见问题总结
weixin_46391404的博客
05-07 3437
vue页面的常用跳转 history.go(-2);//后退两次 history.go(2);//前进两次 history.back(); //后退 hsitory.forward(); //前进 ----------------------------------------------## 标题 为什么 v-for 和 v-if 不建议⽤在⼀起？ 原因：v-for比v-if优先级高，每一次都需要遍历整个数组，造成不必要的计算，影响性能，即使100个list中只需要使用一个数据，也会循环整个数组。 &l
SpringBoot + ElementUI 动态下拉列表
zhouzhiwengang的专栏
08-25 2411
效果展示: 实现思路： 1、下拉框绑定自定义实体参数对象，下拉框选项动态绑定自定义数组对象: <el-select v-model="current" placeholder="请书籍类别"> <el-option v-for="item in category" :key="item.value" :label="item.label" .
ElementUI常用笔记
LI_AINY的博客
11-09 445
Table表格从后台接收数据并个性化展示 方法1：添加格式化函数<el-table-column prop="status" label="流程状态" min-width="70" :formatter="stateFormat">，:formatter="stateFormat" 写函数方法 stateFormat(row, column) { ...
Element Ul快速入门
du_ai_me的博客
01-03 1523
Element Ul快速入门，带你快速上手
element UI 滑动条组件
danger_man的博客
03-09 1122
element UI 里滑动条组件的使用 <el-scrollbar></el-scrollbar>标签即elementUI里的滑动条标签，此标签是一个隐藏标签，在说明文档中没有介绍 <el-card style="width: 250px;height: 400px;" :body-style="{height:'400px'}"> <el-scrollbar style="height: 100%" :native="false">
elementui导航栏内容右对齐_前端组件之垂直导航栏
weixin_39538451的博客
11-23 3190
今天继续组件文章的分享。结合上一次讲到的水平导航栏，今天就讲讲垂直导航栏。其实原理和水平导航栏原理其实差不多类似，那么就来谈谈。 说道垂直导航栏，用到最多的地方就是电商网页，特别像淘宝，天猫，京东，苏宁这些网站都有垂直导航栏。垂直导航栏能展示到更多的子项目供用户链接到想了解的地方。这里结合天猫的垂直导航栏来说说垂直导航栏如何写完成。天猫商城的垂直导航栏首先肯定需要一个最外层的盒子来装载全部的内容。...
element组件样式修改方式
W936438835的博客
03-11 3427
element组件样式修改方式，更新中...
Vue Element-UI使用
Errol's Blog
04-18 390
路由器的两种工作模式 1.对于一个url来说，什么是hash值?——#及其后面的内容就是hash值。 2. hash值不会包含在HTTP请求中，即: hash值不会带给服务器。 3. hash模式: 1.地址中永远带着#号，不美观。 ⒉.若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。3.兼容性较好。 4. history模式: 1.地址干净，美观。 2.兼容性和hash模式相比略差。 3.应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。 ......
vue加element实现表格增删改
09-03
使用Vue和Element UI可以非常方便地实现表格的增删改功能。 首先，我们需要在Vue中引入Element UI的Table组件，用于显示表格数据。可以通过在Vue组件中引入以下代码来实现： ```javascript <template> <el-table :data="tableData"> <!-- 表格列的定义 --> </el-table> </template> <script> import { Table } from 'element-ui'; export default { components: { 'el-table': Table }, data() { return { tableData: [] // 表格数据 }; } } </script> ``` 接下来，我们需要在data函数中定义tableData，用于存储表格的数据。可以通过向tableData数组中添加对象的方式来定义表格的行数据。例如： ```javascript data() { return { tableData: [ { name: 'Alice', age: 20 }, { name: 'Bob', age: 25 }, { name: 'Charlie', age: 30 } ] }; } ``` 然后，我们可以使用Element UI提供的Button组件来实现新增、删除和编辑操作。例如： ```javascript <el-button @click="addRow">新增</el-button> <el-button @click="deleteRow">删除</el-button> <el-button @click="editRow">编辑</el-button> ``` 在Vue组件的methods中定义对应的方法来实现表格的增删改功能。例如： ```javascript methods: { // 新增一行数据 addRow() { this.tableData.push({ name: '', age: '' }); }, // 删除选中的行数据 deleteRow() { const selectedRows = this.$refs.table.selection; selectedRows.forEach(row => { const index = this.tableData.indexOf(row); this.tableData.splice(index, 1); }); }, // 编辑选中的行数据 editRow() { // 编辑操作 } } ``` 通过以上步骤，即可使用Vue和Element UI实现表格的增删改功能。根据具体需求，可以进一步自定义表格列的定义、编辑操作等功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Vue1024

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值