avue avue-from 动态修改column中对象的dicData

 

 场景:点击左侧的树结构,右侧的树动态变化;

<avue-form :option="searchOption" v-model="form"></avue-form>
 searchOption: {
                menuSpan: 6,
                span: 6,
                column: [
                    {
                        label: '测站类型(子类)',
                        prop: 'tree',
                        type: 'tree',
                        clearable: false,
                        labelWidth: 130,
                        dicData: [],
                        nodeClick: (data, node, nodeComp) => {
                            console.log(data.value, '666666');
                        },
                    }
                ]
 },

重点:this.findObject(this.searchOption.column, "tree")这个方法

参数一:配置项
参数二:column中的prop值
就OK了!!!!!

 nodeClick(data) {
            const column = this.findObject(this.searchOption.column, "tree")
            column.dicData = [
                {
                    label: '字典1',
                    value: 0,
                    children: [{
                        label: '字典3',
                        value: 2
                    }]
                }, {
                    label: '字典2',
                    value: 1
                }
            ]
 },

推荐看看avue的全局api:全局api | Avue

### 如何在 Avueavue-crud 组件中给 Select 赋值 为了实现 `avue-crud` 表格内嵌入的 `Select` 下拉框赋值功能,需遵循特定配置方法。通过定义列属性并利用事件机制来控制选项的选择状态。 #### 定义 Column 属性 对于希望包含下拉选择器的表格列,在初始化时应指定其类型为 `"select"` 并提供可选列表项: ```javascript const columns = [ { label: '名称', prop: 'name' }, { label: '类别', // 此列为带有 select 控件的列 prop: 'category', type: 'select', dicData: [{ value: 'A类', label: '分类 A' }, { value: 'B类', label: '分类 B' }] } ]; ``` 上述代码片段展示了如何创建一个名为 "类别" 的列,并为其指定了两个可能的选项:"A 类" 和 "B 类"[^1]。 #### 动态设置选定值 如果要动态更新某行记录内的 `Select` 值,则可以通过修改对应对象实例下的相应字段完成此操作。假设存在一条数据如下所示: ```json { name: "产品X", category: "" /* 初始为空 */ } ``` 现在想要将其 `category` 字段设为 `'A类'`,只需简单地更改该条目对应的键即可: ```javascript let rowToUpdate = tableData.find(item => item.name === '产品X'); rowToUpdate.category = 'A类'; // 或者更推荐的方式是触发一次完整的重绘以确保视图同步最新状态 this.$refs.crud.updateRow(rowToUpdate); ``` 这里使用了 `$refs.crud.updateRow()` 方法来刷新整个行的状态,从而保证界面能够及时反映出最新的变化[^2]。 另外值得注意的是,当处理复杂场景如多级联动菜单或其他依赖于其他输入条件的情况时,应当考虑监听相关事件(例如 `change`),并通过回调函数逻辑调整关联域的内容[^3]。 最后提醒一点关于性能优化方面的小技巧:尽量减少不必要的 DOM 操作次数;尽可能批量提交变更而不是逐个元素逐一修改,这样有助于提高应用的整体响应速度和用户体验质量[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值