Vue如何更改表格中的某一行选项值

如何更改表格中的某一行选项值

结合后端接口，进行相应的传参 Id， state值等，因相关组件库中的方法说明比较简单，有些需要自己去尝试，如下图中change()方法的传参等

//ajax发送请求的相关方法：
get : 获取  ,
post: 新增 ,
put/patch : 更改,
delete:  删除

代码实现

组件库中的方法介绍：

接口示例：

效果：

对table某一行的数据进行编辑，删除，查看详情操作

效果图

在html中需要对button按钮进行template包裹，scope.row就是这一行的数据

<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="primary" @click="editProgram(scope.row)">编辑</el-button>
<el-button type="danger"  @click="del(scope.row)">删除</el-button>
<el-button type="primary" @click="showDetail(scope.row)">详情</el-button>
</template>
</el-table-column>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuejs element table 表格添加行,修改,单独删除行,批量删除行操作

    1.表格动态添加,也可删除 <template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="wid

  • vue实现表格数据的增删改查

    vue实现表格数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注于对数据的操作和处理. 比如我们有一个这样的页面: 我们在这个页面里,就实现了增删改查4个功能,点击链接查看demo[http://www.xiabingbao.com/demo/vue-curd/index.html]. 我们把这些用户信息保存到list的数组中,然后增删改查就在这个数组上进行:

  • vue+Element中table表格实现可编辑（select下拉框）

    最近在工作中遇到一个问题,需要在表格中实现数据可编辑状态,具体情况是需要在单元格里加入下拉框:并且每个下拉框的数组数据是不一样的,具体是根据当前行前面数据的id查询而来,前面的是数据是动态生成的,后面的下拉框数据也是根据id动态生成的,内容不同:有点类似于树形二级状态,后面的下拉框数据来源并没有在前面内容里,而是另外一个接口查询,具体操作如下: HTML代码: 1.在处理人列加入一个下拉框模板,其中v-model必须要scope.row.proJbruserValue来绑定,意思是这个值绑定到当

  • Vue如何更改表格中的某一行选项值

    Vue如何更改表格中的某一行选项值

    如何更改表格中的某一行选项值 结合后端接口,进行相应的传参 Id, state值等,因相关组件库中的方法说明比较简单,有些需要自己去尝试,如下图中change()方法的传参等 //ajax发送请求的相关方法: get : 获取 , post: 新增 , put/patch : 更改, delete: 删除 代码实现 组件库中的方法介绍: 接口示例: 效果: 对table某一行的数据进行编辑,删除,查看详情操作 效果图 在html中需要对button按钮进行template包裹,scope.row

  • vue格式化element表格中的时间为指定格式

    在vue表格中如果直接绑定时间字段默认显示格式一般为:yyyy-MM-dd HH:mm:ss,但有时候只需要显示 年月日 或者 时分秒,这时我们就可以用到过滤器(filter) vue 基础表格 <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180&quo

  • vue实现table表格里面数组多层嵌套取值

    目录 vue table表格里面数组多层嵌套取值 表格部分 methods里面定义方法 vue 多层数组嵌套循环,动态取值匹配 vue table表格里面数组多层嵌套取值 我现在是在表格里拿到级联选择器的多选的id,然后要根据这个id来匹配一个嵌套了三层的数组的第三层id,来拿名字渲染 表格部分 <tr style="height: 44px;line-height: 44px;">                 <td style="border: 1p

  • 理解jquery ajax中的datatype属性选项值

    jquery中ajax的dataType属性用于指定服务器返回的数据类型,如果不指定,jQuery 将自动根据HTTP包MIME信息来智能判断,如果datatype选项不填写的话,会将返回的数据当成字符串处理. 一.ajax语法 复制代码 代码如下: jQuery.ajax([settings]) 参数说明 settings:用于配置 Ajax 请求的键值对集合.可以通过 $.ajaxSetup() 设置任何选项的默认值. 二.ajax的datatype选项的值 1."xml":返回

  • vue如何将v-for中的表格导出来

    一.需要安装以下依赖 npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. 三.在.vue文件中      写这两个方法:其中list是表格的内容 //export2Excel是你点击导出所绑定的方法名 export2Excel() { require.ensure([], () => { const {

  • Vue实现表格中对数据进行转换、处理的方法

    众所周知,后端从Mysql取出的数据,一般是很难单独处理某一个Key的数据的(需要处理的话,可能会浪费大量的性能.而且对页面加载时间有很大的影响),所以,从数据库取出的数据.只能由前端进行处理.但是在Vue中,如果采用了element等组件,利用数据绑定的特性,也是很难对表格遍历的数据进行单独行的处理的. 我们这边取一个例子来说.比如Mysql datetime 类型的数据与我们一般的显示的形式是不一样的,为了用户更好的体验,势必需要对时间格式进行转换的. 下图是从mysql中默认取出的date

  • vue中更改数组中属性,在页面中不生效的解决方法

    问题描述: 使用vue的方法获取了数组数据,获取数据后为每个数据增加edit属性,初始值均为false,其目的是为了当点击列表中的编辑按钮时,控制保存与不保存的按钮的出现与消失,结果当更改数组中的edit属性后,页面并没有如预期的那样当edit为true时页面显示更改状态,当edit为false时为不更改状态 解决方案: edit是在通过post方法获取数据后增加到vue的data数据中的属性,一开始我的做法先将接收到的数据赋值到vue的data中,再对vue的data中的数据增加edit属性,

  • vue更改数组中的值实例代码详解

    根据下标更改时 vm为新建的vue对象 ind为数组 第一个e为在数组ind中e索引位置 第二个e为更改为值e vm.$set(vm.ind,e,e) 常规更改 arr为数组 //添加 arr.push(1); //删除 arr.splice(*,*); //替换 arr.splice(*,*,*); splice方法 实例 例子 1 在本例中,我们将创建一个新数组,并向其添加一个元素: <script type="text/javascript"> var arr = n

  • VUE页面中通过双击实现复制表格中内容的示例代码

    VUE页面中通过双击实现复制表格中内容页面预览: vue中代码实现: <template> <el-table :data="tableData" height="250" border style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-t

  • vue用ant design中table表格,点击某行时触发的事件操作

    使用customRow 设置行属性,写对应事件 :customRow="rowClick" 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚 补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件 点击行,有一个customRow.

随机推荐