vxe 行编辑自动加载行级别的下级下拉框数据

最新推荐文章于 2023-11-09 12:55:47 发布
最新推荐文章于 2023-11-09 12:55:47 发布
阅读量331 收藏
点赞数
分类专栏： VUE 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq873113580/article/details/131798429
版权
该文章描述了一种技术方案，即在行编辑模式下，通过调用特定方法根据ID动态加载下拉框的数据。这允许用户在点击编辑时，下拉选项能自动根据关联的ID显示相应的子级信息，且配置中设置了编辑触发方式和是否自动清除等选项。
摘要由CSDN通过智能技术生成

效果：进入编辑的时候自动根据ID带出下级下拉框

 实现思路：行编辑进入之前，调用加载下拉框的方法

activeRowMethod({ row, rowIndex }) {
     
    this.getSpecsList(row.wlid);
    
    return ret;
},
:edit-config="{
            trigger: 'click',
            mode: 'row',autoClear: false,
            activeMethod: activeRowMethod,
          }"

Teln_小凯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vxe-grid加载页面默认表格选中第一行高亮.vue
03-29
vxe-grid加载页面默认表格选中第一行高亮.vue
Grid得到选择行数据的方法总结
01-19
//得到grid所有的行 代码如下: grid.getSelectionModel().getSelections(); //得到选择所有行 //注：如果不声明var sm = new Ext.grid.CheckboxSelectionModel();则会报此句没有该对象或属性 Var selectRows = grid...
j-vxe-table 下拉搜索选择框数据加载过多导致前端崩溃问题
qq_44408913的博客
02-22 1118
我被Jeecg-Boot背刺？
vxe-table在线表格的使用记录
m0_45305745的博客
10-14 1931
vxe-table在线表格使用：设置 edit-config={trigger: 'manual', mode: 'row'} 启用行编辑的功能。1.npm安装：（Vue2）（在线编辑表格手动触发）
JeecgBoot页面级联选择框(三种方法)
m0_55841258的博客
06-02 2799
（已实践）（已实践）（简单测试，只贴代码，不做过多说明）
在GridView编辑行中绑定下拉框数据
WaterShuiMiao的专栏
06-22 8427
<br /><br />.aspx代码:代码 1<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"<br /> 2 ForeColor="#333333" GridLines="None" OnRowCreated="GridView1_RowCreated" OnRowDataBound="GridView1_RowDataBound" OnRowCommand
vxe-table可编辑状态默认显示下拉选select为默认展示
qq_27161847的博客
09-25 8349
vxe-table可编辑状态默认显示下拉选select为默认展示 vxe-table是一个功能齐全的表格解决方案，设置可编辑状态输入下拉框等组件默认是不显示的，只有点击或者双击通过其他事件才能触发，为此我尝试了很多方法改样式改底层代码很麻烦，最后使用插槽搭配表格的属性来实现，通过在vxe-table的edit-render中的autofocus属性实现点击其他元素聚焦select输入框从而显示option列表，然后使用插槽模板template的default默认表格内容从而无缝默认展示select输入框，以
一个可以增加和删除行的table并可编辑表格中内容
09-04
在本示例中，我们探讨如何创建一个交互式的HTML表格，该表格允许用户增加、删除行以及编辑表格中的内容。这对于构建数据管理界面或者简单的数据输入应用非常实用，特别是对于初学者来说，这是一个很好的实践项目。 ...
可进行输入编辑的select下拉框
10-29
下拉框选择已有固定value，也可以选择后进行编辑，也可以直接输入数值。
javascript实现table选中的行以指定颜色高亮显示的方法
10-24
此外，本文还提到了一些其他的技巧和注意事项，比如在页面加载完成时通过`body onload`属性自动执行`IniEvent`函数，确保在页面元素加载完毕后才绑定事件，以避免可能出现的事件绑定错误。 当然，为了使代码更加...
vxe-table表格校验失败后保持可以编辑状态
qq_27161847的博客
11-09 886
vxe-table表格校验失败后保持可以编辑状态
vue2+vxtable实现复杂可编辑表格
qq_42797527的博客
11-29 2993
后面的函数可以自行参考文档写辣。
vxe table 最简单的行内编辑
qq_35011890的博客
06-07 2381
基于Vue的表格框架 vxe-table行内单元格编辑
vxe-table 表格里每行的项的下拉选项不同的处理方式
Yseventeen
02-08 4633
需求：直送商品、非直送商品，差异原因和差异处理方式的下拉选项要求不一样。 简单记录一下实现方式，可以作为参考： 1. 在激活编辑时对下拉选项赋值（根据条件去请求接口获取下拉选项或者前端设置下拉选项）；@edit-actived="editActivedEve" editActivedEve为获取下拉值的处理方法 <vxe-grid ref="xGrid" border="default" height="400" .
Vue中的vxe-table教程18-工具栏新增、删除、保存、列显示与隐藏
weixin_42289273的博客
01-13 7898
效果图： 1. index.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://
vxe-table vue 增删改查表格组件
热门推荐
大猩猩X
01-26 2万+
查看 Github 功能点： 支持单列编辑 支持整行编辑 支持手动、单击、双击编辑模式 支持渲染简化的内置组件 支持渲染任意自定义组件 支持动态列渲染 支持数据校验（同步、异步） 支持显示列数据 change 状态 支持增/删/改/查/还原 支持原 ElTable 所有参数及功能 API Editable Attributes &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;
vxe-table中如何实现渲染指定的单元格点击事件
weixin_44232293的博客
07-07 1万+
在使用vxe-table过程中，需要点击一个指定单元格弹出选择窗体，在官网文档中，找到 @cell-click事件，需放在全局标签上才可以，但是其实现了点击行事件，无论点击哪个单元格均出现弹窗。所以如何渲染到指定单元格呢？ 解决方案：打印出@cell-click事件的列参数，从中找字段，具有代表唯一一个列的字段值既可以判断是否是该列的单元格。具体代码如下： 下面展示一些 内联代码片。 HTML代码 <vxe-table @cell-click="cellClickEvent"&gt
vxe-table 可编辑表格新增数据报错 TypeError: Cannot read property 'name' of undefined
cnsummerLi
04-22 2395
原因： 可编辑表格列表没有写:edit-render 导致框架不能识别 如果想要某列不可编辑可以使用activeMethod 来禁用某一列而不是直接不写:edit-render :edit-config="{trigger: 'click', mode: 'cell',showStatus: true,activeMethod: activeCellMethod}"> a...
vxe-table可编辑表格下拉框数据回显
最新发布
12-06
为了实现vxe-table可编辑表格下拉框数据回显，可以按照以下步骤进行操作： 1. 在表格中定义下拉框的选项列表，例如： ```javascript { field: 'status', title: '状态', editRender: { name: 'select', options: [ { label: '启用', value: '1' }, { label: '禁用', value: '0' } ] } } ``` 2. 在激活编辑时，将下拉框的选项列表赋值给下拉框组件，例如： ```javascript methods: { editActivedEve(params) { if (params.column.editRender.name === 'select') { params.column.editRender.options = [ { label: '启用', value: '1' }, { label: '禁用', value: '0' } ]; } } } ``` 3. 在表格中定义下拉框的选项列表后，需要在激活编辑时对下拉框的选项进行赋值，可以通过监听`@edit-actived`事件来实现，例如： ```html <vxe-grid ref="xGrid" border="default" height="400" @edit-actived="editActivedEve"></vxe-grid> ``` 4. 当下拉框的选项列表赋值完成后，需要将下拉框的选项值与表格数据进行绑定，可以通过监听`@cell-change`事件来实现，例如： ```html <vxe-grid ref="xGrid" border="default" height="400" @edit-actived="editActivedEve" @cell-change="cellChangeEve"></vxe-grid> ``` ```javascript methods: { cellChangeEve(params) { if (params.column.editRender.name === 'select') { params.row[params.column.property] = params.cellValue; } } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值