精华内容
下载资源
问答
  • 假如我想从表格中删除第二行,即身份证号为5的数据,那么就需要在点击删除按钮时拿到那一行的信息。 具体代码如下 <el-table-column label="操作" width="140"> <template slot-scope="scope"> ...

    vue + element框架

    假如我想从表格中删除第二行,即身份证号为5的数据,那么就需要在点击删除按钮时拿到那一行的信息。

     具体代码如下

    <el-table-column
         label="操作"
         width="140">
       <template slot-scope="scope">
         <el-button type="danger" icon="el-icon-delete" @click="dele(scope.row)">删除</el-button>
       </template>
    </el-table-column>

    JS代码:

    dele (e) {
          alert(JSON.stringify(e))
          alert(e.id)
          this.$confirm('此操作将永久删除该用户信息,是否继续?', '提示', {
            confirmButtonText: '确定',
            cancleButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$axios.post('delete', {id: e.id})
              .then(alert('删除成功'),
                location.reload()
              )
          })
    }

    效果如下图:

    alert(JSON.stringify(e))的效果:

    alert(e.id)的效果:

     

    展开全文
  • 1.表单数据一行的创建+删除(彻底删除/隐藏双实现) 2.计算商品总价格 如何使用Vue: 基本结构: 1、引入Vue的核心JS文件 2、准备Dom结构 3、实例化组件 通过el属性,挂载元素,绑定id为app的html元素 通过data属性,...

    在这里插入图片描述
    如何使用Vue:
    基本结构:
    1、引入Vue的核心JS文件
    2、准备Dom结构
    3、实例化组件
    通过el属性,挂载元素,绑定id为app的html元素
    通过data属性,定义数据,可以在html代码段中显示的数据
    4、获取数据
    数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

    目标两个例子:

    1.表单数据一行的创建+删除(彻底删除/隐藏双实现)

    2.计算商品总价格

    在这里插入图片描述

    第一题代码+注释

    特色:1:内容提前判断为空的功能,红色字显示,且无法实现创建功能,只有全部符合要求才可以创建用户
    2:创建的用户自动追加到最后一行数据
    3:所有数据都存储在组件data中,body标签中没有任何数据,即都是从data中动态获取出来的

    判断为空效果如下:

    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            form{
                width: 500px;
                height: 210px;
                border: 1px solid;
                border-color: red;
            }
            table{
                margin-top: 20px;
                width: 500px;
                border: 1px solid;
                border-color: red;
            }
            tr{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <!--
            注意:最开始只实现了隐藏功能(也就是display:none),没有彻底删除,后面终于实现了删除功能通过索引
                e.currentTarget.parentElement
                  获得点击元素的父级元素
           -->
        <div id="app">
            <form>
                <p>
                    <!--v-model代表表单数据绑定,即页面数值变了,后台的数据也就改变了-->
                    姓名:<input type="text" placeholder="请输入姓名" v-model="newPerson.name">
                </p>
                <p>
                    年龄:<input type="text" value="0" v-model="newPerson.age">
                </p>
                <p>
                    性别:<select v-model="newPerson.sex">
                    <option >男</option> <!--这里之所以初始化绑定男,是因为后面组件data中定义的,前面写selected无效-->
                    <option>女</option>
                </select>
                </p>
                <p>
                    手机:<input type="text" placeholder="请输入手机号" v-model="newPerson.tel">
                </p>
                <!--追加span的目的是,点击按钮后显示判断为空的信息,为空则无法创建,符合才可以继续下一步-->
                <button type="button" @click="createPerson">创建新用户</button> &nbsp; <span style="font-size: 12px;color: red;">{{errorMsg}}</span>
            </form>
            <table>
                <tr id="tr1" style="background-color:pink">
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>手机</th>
                    <th>删除</th>
                </tr>
                <tr v-for="person in people">   <!--v-for="person in people"这是遍历people数组的写法,从data中隔行拿出数据显示在table中,person代表一整行数据,people代表属性数组名字-->
                    <td>{{person.name}}</td>
                    <td>{{person.sex}}</td>
                    <td>{{person.age}}</td>
                    <td>{{person.tel}}</td>
                    <!--上面不写(person,index)也可以直接使用默认index关键字,无法更改index名字,只能用默认的这个-->
                    <td><button @click="delPerson(index)">删除</button></td>
                </tr>
            </table>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery-1.9.0.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script>
        var app = new Vue({
            el:"#app",  // el:element的简写。挂载元素,绑定id为app的html元素
            data:{
                errorMsg:"",
                newPerson:{
                    name:"",
                    sex:"男",
                    age:"",
                    tel:""
                },
                people:[{
                    name:"张三",
                    sex:"男",
                    age:"25",
                    tel:"145xxxxxx"
                },{
                    name:"李四",
                    sex:"女",
                    age:"15",
                    tel:"139xxxxxx"
                },{
                    name:"王五",
                    sex:"女",
                    age:"9",
                    tel:"115xxxxxx"
                }]
            },
            methods:{
                //隐藏功能
                /*delete1:function(e){
                   e.currentTarget.parentElement.parentElement.style.display="none";
                },*/
                createPerson: function(){
                    // 判断元素是否为空
                    if (this.newPerson.name == "") { //this代表new出来的Vue对象,也就是app对象
                        this.errorMsg = "用户名不能为空!";
                        return;
                    }
                    if (this.newPerson.age == "") {
                        this.errorMsg = "用户年龄不能为空!";
                        return;
                    }
                    if (this.newPerson.tel == "") {
                        this.errorMsg = "用户电话不能为空!";
                        return;
                    }
                    //console.log(this);
                    this.people.push(this.newPerson); //push相当于在最后拼接一行数据的方法
                    // 添加完newPerson对象后,重置newPerson对象,清空绑定的数据和提示信息
                    this.newPerson = {name: '', age: '', sex: '男',tel:""};
                    this.errorMsg = "";
                },
                delPerson: function(index){
                    // 删一个数组元素
                    this.people.splice(index,1); //splice删除方法,1代表删除几个
                }
            }
        });
    </script>
    </html>
    

    第2题:计算总价格

    特色:1:隔行换色
    2:数量为0时不会再减少,即不会出现负数
    3:删除某一行总金额钱数也会动态跟着改变
    4:初始表没有信息将不会显示表格,且左下方显示:暂无数据…

    在这里插入图片描述
    添加一个初始判断语句,当属性表格没数据是显示:
    在这里插入图片描述

    第二题代码+注释

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
        <script type="text/javascript" src="js/vue.js" ></script>
        <style>
            table{
                border: 1px;
                border-color: #d58512;
            }
            tr{
                border-color: #d58512;
                text-align: center;
            }
            /*根据奇偶数进行样式颜色*/
            tr:nth-child(even){
                background-color: #f5f5f5;
            }
            tr:nth-child(odd){
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--如果长度为0,table不显示-->
            <table v-if="goods.length>0"  align="center" width="700px" border="1px" style="border-collapse: collapse;" >
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
                <tr v-for="(product,index) in goods">
                    <td>{{product.id}}</td>
                    <td>{{product.name}}</td>
                    <td>{{product.price}}</td>
                    <td>
                        <!--附加功能:disabled="product.count==0"是内部属性,为1时按键失效-->
                        <button @click="subtract(index)" :disabled="product.count==0">-</button>
                        {{product.num}}
                        <button @click="add(index)">+</button>
                    </td>
                    <td>
                        <button @click="del(index)">删除</button>
                    </td>
                </tr>
                <tr>
                    <td colspan="5" align="center"> <!--colspan="5"指横跨5列-->
                        总金额:{{sum()}}<!--只写sum代表方法名,不会运行结果,必须写sun()带括号的-->
                    </td>
                </tr>
            </table>
            <div v-else> <h3>暂无数据......</h3></div><!--当属性数组长度为0时,显示的信息-->
        </div>
    </body>
    
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                goods:[{
                    id:1,
                    name:"锤子",
                    price:10,
                    num:0
                },{
                    id:2,
                    name:"毛线",
                    price:20,
                    num:0
                },{
                    id:3,
                    name:"铲铲",
                    price:15,
                    num:0
                }]
            },
            methods:{
                //+法
                subtract:function(index){ //this代表new出来的Vue对象,所以所有伤心个都可以拿到
                    if(this.goods[index].num == 0){
                        this.goods[index].num = 0;
                    }else{
                        this.goods[index].num--;
                    }
                },
                //-法
                add:function(index){
                    this.goods[index].num++;
                },
                //删除
                del:function(index){
                    //e.currentTarget.parentElement.parentElement.style.display="none";  //隐藏功能
                    this.goods.splice(index,1); //splice删除方法,1代表删除几个
                },
                sum: function () {//遍历数组,计算总金额
                    var s = 0;
                    //单独按键方法里this代表当前行整个数据,外面代表整个vue对象,可以获调用所有属性
                    for (var i = 0; i < this.goods.length; i++) {
                        s += this.goods[i].price * this.goods[i].num;
                    }
                    return s;
                }
            }
        });
    </script>
    </html>
    
    
    展开全文
  • 主要介绍了vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue 获取后台数据并取出某个元素

    千次阅读 2019-10-08 10:51:07
    2: 筛选后台返回前端的数据集 this.coreEnterprise = res.data // const delArr = [‘warehouse_enterprise’, ‘bonding_enterprise’, ‘platform’, ‘bank’] // this.coreEnterprise = this.coreEnterprise....

    getShowTransferSupplier({}).then(res => {
    const data = []
    for (let i = 0; i < res.data.length; i++) {
    data.push(
    res.data[i].name
    )
    }
    this.companys = data
    })

    2: 筛选后台返回前端的数据集
    this.coreEnterprise = res.data
    // const delArr = [‘warehouse_enterprise’, ‘bonding_enterprise’, ‘platform’, ‘bank’]
    // this.coreEnterprise = this.coreEnterprise.filter(item => !delArr.includes(item.eterpriseType))
    // this.totalPage = this.coreEnterprise.length / 10
    // this.totalCount = this.coreEnterprise.length

    展开全文
  • vue获取当前索引scope.$index

    千次阅读 2021-02-18 13:10:15
    获取当前索引 <el-button type="text" style="margin-left: 10px" v-on:click="updatesort(scope.row,scope.$index)">{{$t("置顶")}}</el-button> updatesort(row,index){ var rowindex=(this....

    获取当前行索引

    <el-button type="text" style="margin-left: 10px" v-on:click="updatesort(scope.row,scope.$index)">{{$t("置顶")}}</el-button>
    
    updatesort(row,index){
    				var rowindex=(this.pageIndex - 1) * this.pageSize + index + 1;
    				console.log(rowindex, row);
    				}
    
    展开全文
  • element+vue 批量获取选中数据

    千次阅读 2020-05-09 15:04:25
    在添加属性 ref = "multipleTable " , 在 添加type属性 type=" selection " 使个单元格变成可以选中的样式 this.$refs.multipleTable.selection 可以拿到所有被选中的对象
  • 加入两代码: import VueResource from 'vue-resource' Vue.use(VueResource); 二、调用请求 1、创建在线模拟数据的接口 可去easy-mock官网创建,具体方法不在此详述。 比如,接口编辑如下: { ...
  • 、添加数据前 二、添加数据后 三、实现方法 setPayWaySummaryList() { // summaryArr格式和接口的要一样,summaryArr为添加到data的第三条数据 const summaryArr = { cash: 0, pos: 0, wechat: ...
  • vue前后端分离从后台获取menuList生成动态路由 将目录作为子目录添加到首页下面,可以显示出来,但是第二次点击同个菜单时,会出现 地址叠加的情况,导致页面不能显示。而且先点击到别的页面也会出现这种情况 ...
  • 目录table添加操作按钮和获取当前行数据 table添加操作按钮和获取当前行数据 html <a-table class="user_table" :columns="columns" :data-source="roleList" :rowKey="roleList.key" > <template...
  • vue 循环加载数据获取条记录

    万次阅读 2017-06-14 18:14:17
    最近使用elment ui和vue.js,遇到需要像c:foreach类似的效果,就找了  vue的API:https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if  element ui:http://element.eleme.io/#/zh-CN/component/input 用法...
  • Vue获取数据后只渲染前几条数据

    千次阅读 2020-08-04 18:25:21
    1、使用.slice(0, 4),展示四条数据 <ul> <li v-for="(item,index) in authenticationList.slice(0,4)" :key="index"> {{ item.message }} </li> </ul> 2、取得数组的索引,使用...
  • 最近使用elment ui和vue.js,遇到需要像c:foreach类似的效果,就找了 vue的API:https://cn.vuejs.org/v2/guide/list.html#v-for-with-v-if element ui:http://element.eleme.io/#/zh-CN/component/input 用法: ...
  • 问题:当我们在表格中会有以下点击按钮,然后获取该行的某列信息; 在 修改按钮 上设置 οnclick="edit(this)" function edit(val){ //这里就是val,别以为写错了,如果写成this会报错:Uncaught Syntax...
  • Ant Design Vue获取表格中列的数据

    千次阅读 2019-07-30 10:26:42
    {{text}} {{text}} slot-scope,代表着插槽的范围,类似于session.Scope,record代表获取dataSource一行的值,所以想要获取到table中的值使用record.xx,xx代表着自定义dataSource中的数据
  • vue获取用户当前城市 vue获取定位

    千次阅读 2019-12-12 13:52:15
    新建个js文件 里面写此代码 暴露function 注意这里的ak是秘钥.百度地图的秘钥 自己注册账号 根据相关操作获取 export function MP(ak) { return new Promise(function (resolve, reject) { window.onload = ...
  • :需要在方法里写: // 获取当前时间,day为number,getDay(-1):昨天的日期;getDay(0):今天的日期;getDay(1):明天的日期;【以此类推】 getDay(day) { var today = new Date(); var targetday_milliseconds = ...
  • <el-table @row-click="clickRow" :data="tableData" border ref="yourTable" max-height="300" style="width: 100%;margin-top: 20px;" @selection-change="handleSelectionChange" ...
  • 怎么拿表格当前行数据 平时我们在使用表格时通过template的slot-scope=“scope”,使用scope.row拿到当前行的数据 <el-table max-height="290" :data="userTableData" border style="width: 100%"> <el-...
  • 之前做的传统表格用到跨,会在表格中再嵌套个表格,代码很不美观, 所以这次用vue做了单个table,实现了这个功能:标题独立,左右的tr分开。 <template> <table cellspacing="0" border="1">...
  • Vue通过接口获取数据在列表展示

    千次阅读 2020-04-23 10:42:25
    1、引入JS <!--bootstrap--> ... if(json.status===0){ this.list = json.message } else{ alert('获取数据失败') } }) } } })
  • 正确代码:(注:要想查看后台数据可以点击 https://www.easy-mock.com/mock/5ce57090f2fc446b5d8ffe18/blog/blogdata这个链接) < template> < div class=“show-examples”> < el-input p...
  • jqGrid获取一行数据的方法

    千次阅读 2019-07-23 20:41:31
    //获取一行var rowData = $("#nkinGridTable").jqGrid("getRowData",rowId);//获取某个单元格的数据var nkinKINsum = rowData.nkinKINsum; 转载于:https://www.cnblogs.com/blog-wp/p/3290787.html...
  • 主要介绍了vue 列表页跳转详情页获取id以及详情页通过id获取数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue获取input输入值的问题解决办法 v-for里有多行input输入框,vue怎么获取某的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某的值时进行校验,输入错误友好提示下...
  • 在此之前,已经实现了vue+ElementUI的跨域查询并渲染查询结果的功能,现在想要在每一行中添加修改和删除的按钮。于是乎就需要获取当前行的数据,于是就有了下面两种方式的获取。 1 获取当前行的数据 1.1 我的笨...
  • 在搭建好laravel+vue+element-UI的项目后,我们在element-UI的组件中我们发现,取后台数据的方式跟以前的VUE不一样的。 以前VUE我们用v-for来取数据进行循环,在element-UI中用data取数据循环:data=""如下...
  • 今天小编就为大家分享一篇vue 点击按钮增加一行的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 27,769
精华内容 11,107
关键字:

vue获取一行数据

vue 订阅