element-ui 中 el-table 根据scope.row行数据变化动态显示行内控件

最新推荐文章于 2024-08-07 18:21:52 发布

weixin_30548917

最新推荐文章于 2024-08-07 18:21:52 发布

阅读量5.2k

点赞数

文章标签： ui javascript json ViewUI

原文链接：http://www.cnblogs.com/ckmouse/p/11490604.html

版权

在使用Element-UI的el-table组件时，遇到问题：试图通过scope.row.edit来控制行内元素的显示，但由于初始数据中并无edit字段，导致视图无法实时更新。为解决这个问题，可以绑定scope.row已存在的字段，如propertyId，通过改变其类型而非值来控制按钮的显示状态。最后，通过在methods中动态为数组记录添加edit属性，实现了理想的交互效果。

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


加入本行的数据为scope.row，其数据格式为

{
        "propertyId": 4,
        "propertyName": "标题",
        "propertyType": 0
 }

如果这里v-show=“scope.row.edit”，因为scope.row本来没有edit这个字段，当在vue的methods中改变edit值时，不能立刻反应在view中。

所以只能绑定scope.row已存在的字段，但是又出现一个问题，改变绑定的字段时数据的变化会反应在表格数据上。

解决办法：绑定scope.row.propertyId，不改变其值，改变其类型，根据其类型设置按钮是否显示

<el-table-column label="操作">
              <template scope</

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30548917

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue更改slot-scope=“scope“中的值

xiaojiakun的博客

10-21

3035

业务需求将input中绑定了行内元素的值，添加默认值0，并且可以修改 <el-table-column label="投放数量" align="center" min-width="40" > <template slot-scope="scope"> <el-input

elementUI table组件获取表格当前行的索引

最新发布

qq_52200849的博客

08-07

1682

其特点是占用内存少，并发能力强，在各大型的公司都有非常广泛的使用。在后台运行，那么继续接下来修改端口号的操作，否则不用），通过日志文件发现端口号80被占用，在。启动，该服务器默认占用80端口号，但是打不开（通过查看任务管理器如果没有看到这个。：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下。，可以直接访问到我之前写的DeptView和EmpView。访问我们的端口号（我的依旧是80没有改变），在地址栏输入。3、定义组件文件，访问官网，复制组件代码，调整。表格、分页、对话框、表单。

vue实现表格行内编辑

weixin_41463944的博客

05-10

1113

<template slot-scope="scope"> <div> <el-button type="success" @click="addData">添加数据</el-button> <el-button type="success" @click="submitData">提交</el-button> <el-divider></el-divider> <el-

element-ui 表格实现单元格可编辑的方法

cj914909194的博客

06-15

1万+

<template> <el-table :data="tableData" border @cell-mouse-enter="handleMouseEnter" @cell-mouse-leave="handleMouseOut" style="width: 100%"> <el-table-column l

vue填坑系列之属性值获取动态参数

xuxinwen32的博客

05-05

4308

在实际项目开发当中遇到需要根据设备编号和电路板编号进行判断是否解绑按钮的操作；设备编号和电路板编号同时存在那么解绑按钮可以点击，否则处于禁用状态；我这边写了两种获取状态值的方法，第一种直接在html标签中使用三元运算符，第二种写成一个方法，页面加载的时候直接调用；  &lt...

Vue使用scope修改传递的数据时，源数据也发生变化解决办法（深拷贝浅拷贝）

qq_41082746的博客

05-23

4096

修改试题列表里面的试题你会发现直接使用scope.row形成修改数据的变量后。 this.questionsEditData = scope.row 当你去修数据之后，会发现源数据也会发生变化。红色框框里面的数据也会发生变化，就是因为，我们赋值利用的是浅拷贝，指向的是地址，所以修改后源数据也发生了变化。那么怎么解决这个问题呢？ let row = JSON.parse(JSON.stringify(scope.row)) this.questionsEditData..

1-4.vue+element-ui实现简单的查找操作

落叶的博客

02-26

5994

Vue查找表格数据这里是将vue与element-ui组件结合使用，在使用之前，得准备好vue与element-ui的安装环境，详情安装操作请参考博客https://blog.csdn.net/weixin_43913219/article/details/104296020 1.首先在<template>标签中写好需要的模板。这里用到了element-ui组件库中的input输入框...

Element-UI组件之表单Form

TwentyOne__的博客

07-03

5474

Element-UI组件之表单FormRadio 单选框基础用法禁用状态单选框组按钮样式带有边框Checkbox 多选框基础用法禁用状态多选框组indeterminate 状态可选项目数量的限制按钮样式带有边框Input 输入框基础用法禁用状态可清空密码框带 icon 的输入框文本域可自适应文本高度的文本域复合型输入框尺寸带输入建议自定义模板远程搜索输入长度限制 Radio 单选框基础用法 &...

element组件---Form

weixin_45343878的博客

08-07

1037

Radio 单选框 Checkbox 多选框 Input 输入框 InputNumber 计数器 Select 选择器 Cascader 级联选择器 Switch 开关 Slider 滑块 TimePicker 时间选择器 DatePicker 日期选择器 DateTimePicker 日期时间选择器 Upload 上传 Rate 评分 ColorPicker 颜色选择器 Transfer 穿梭框...

表格多选并根据每行值初始化选中状态（el-table-column type=“selection“）

老程的博客

10-29

1万+

需求描述：首先需求表格遍历显示数据，每行前需要一个复选框；要求二是根据每个对象的某个属性值判断是否默认被选中，如下图，是可关联商品的默认被选中表格前面加复选按钮可以直接参考el官方组件第一步：在 el-table 中加ref 属性，它在vue中相当于是id的存在。 ref=“multipleTable”,下面写 js 用的  <el-table :data="tableData" ref="multipleTable" .

elementui表格自定义列根据scope值动态改变样式不生效的解决方法

qq_41590119的博客

08-25

1585

一、首先上需求，如下图操作列是我自定义的一列，需求就是点击哪一行就改变点击按钮的样式，还原其他行按钮！遇到过几次这种需求了，每次都想不起来之前是怎么解决的，这次写个博客备忘一下。下面进入主题！！ 1、html部分 2、数据这个lastClick后面会用到 3、js部分在这一块我首先是在mounted生命周期里面遍历数据，给每一个对象都增加一个isClick，用于判断当前行是否被点击过 mounted() { this.tableData.forEa...

element-ui表格列el-table-column如何根据数据不同显示不同的值，获取prop值

qq_46617584的博客

10-24

1万+

element-ui表格列el-table-column如何根据数据不同显示不同的值，获取prop值

elements表格编辑弹窗改变其中一项，表格数据实时变动问题

wyd2015pmc的博客

04-13

961

问题：在使用element表格的时候，在利用弹出对话框修改某行数据的时候，表格采用scope.row进行传值。但修改框数据变化的时候，表格相应行的数据同样改变。原因： row是Object对象类型，如果直接赋值的话，就变成了浅拷贝，复制的是地址，导致在表单中改变值的时候table中的数据也跟着改变，所以要进行深拷贝。解决方法： 1进行深度拷贝：let row = JSON.parse(JSON.stringify(scope.row)) 2根据后端的接口：根据scope.row.id 查询的信息，重新

elementUI根据数据修改表格某一行或列的样式

Xuhai0811的博客

07-26

800

if(row.ID==='1'){ // 判断条件。if(row.ID==='1'){ // 判断条件。注：如果样式标签加了 scoped 则加上深度选择。2、根据每行数据的不同动态添加不同的类名。

vue+elementUI +mysql获取后台返回的图片路径动态渲染页面

Laladoge的博客

03-03

1万+

先上图，做出来的效果是这样的图片放在服务器下，mysql保存图片路径，数据类型为varchar 后台接口是用nodejs写的，查询数据库，前端调用接口，返回数据给前端结构： url字段存储的是图片的路径 <el-table:data="myData.list"stripeborder> <el-table-...

ElementUI的Form表单使用slot-scope=“scope“获取当前表格行数据实现数据回显、修改表单操作

m0_62283830的博客

11-22

6806

ElementUI的Form表单使用slot-scope="scope"获取当前表格行数据实现数据回显、修改表单操作

element-ui中table组件的scope.row可以传给兄弟组件吗

05-26

可以的。你可以在父组件中定义一个变量，然后将scope.row赋值给该变量。接着将该变量传递给兄弟组件即可。具体操作可以参考以下代码示例：父组件中定义变量并将scope.row赋值给该变量： ``` <template> <div> <el-table :data="tableData" @row-click="handleRowClick"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="sex" label="Sex"></el-table-column> </el-table> <sibling-component :rowData="rowData"></sibling-component> </div> </template> <script> export default { data() { return { tableData: [ { name: 'John', age: 20, sex: 'male' }, { name: 'Jane', age: 25, sex: 'female' }, { name: 'Tom', age: 30, sex: 'male' } ], rowData: null } }, methods: { handleRowClick(row, column, event) { this.rowData = row; } } } </script> ``` 在兄弟组件中接收传递过来的rowData变量： ``` <template> <div> <p>Selected Row:</p> <p>Name: {{ rowData.name }}</p> <p>Age: {{ rowData.age }}</p> <p>Sex: {{ rowData.sex }}</p> </div> </template> <script> export default { props: ['rowData'] } </script> ``` 这样就可以将table中点击的行数据传递给兄弟组件了。