开发者社区> 问答> 正文

子表中有一个成员组件,想要将子表成员控件的值放到主表多选中

已解决

子表中有一个成员组件,因为关联表单不触发onChange事件,所以成员控件值是数据联动(关联表单填充一个控件)带出来的,然后给子表或者这个成员组件绑定onChange事件。现在就想将子表中的成员控价的值去重后放到主表的多选成员控件中

展开
收起
游客ufdvp5srprsrg 2023-11-16 16:37:49 223 0
来自:钉钉宜搭
2 条回答
写回答
取消 提交回答
  • 若回答对您有帮助,记得点下赞同哦~
    采纳回答

    你好可以参考一下下列代码,注意修改一下子表单的唯一标识及子表单内成员组件的唯一标识```// 子表单onchange事件
    export function onTableChange({ value, extra }) {
    const { formGroupId, fieldId, from, changes = {}, tableFieldId } = extra || {};
    console.log(fieldId, '11', value)
    // 必须,避免使用 updateItemValue 更新子表数据后,再次触发 onChange 陷入死循环
    if (from === 'setItemValue') { return };
    const tableField = this.$('tableField_lp0zc3kc');
    // 上述代码必须存在,否则会造成功能异常
    // 子表单成员2(多选模式)
    if (fieldId && fieldId === 'employeeField_lp0zc3ke') {
    const employeeData = value.filter(item => {
    return item.employeeField_lp0zc3ke && item.employeeField_lp0zc3ke.length > 0;
    });
    const users2 = [];
    for (let i = 0; i < employeeData.length; i++) {
    for (let j = 0; j < employeeData[i].employeeField_lp0zc3ke.length; j++) {
    users2.push(employeeData[i].employeeField_lp0zc3ke[j])
    }
    };
    this.$('employeeFieldlp0zc3kf').setValue(.uniqBy(users2, 'value'));
    };
    }

    /**

    • 主表关联表单onchange事件
    • @param value 当前值
      */
      export function onChange({ value }) {
      setTimeout(()=>{
      const arr = this.$('tableField_lp0zc3kc').getValue(); // 获取子表单的值
      const newArr = this.removeFn(arr);
      this.$('employeeField_lp0zc3kf').setValue(newArr) // 赋值给主表去重成员
      },500)
      }

    // 处理表单中的成员格式及去重
    export function removeFn(arr) {
    const obj = {};
    arr.forEach(item => {
    const employeeFields = item.employeeField_lp0zc3ke || [];
    employeeFields.forEach(item1 => {
    if (!obj[item1.key]) {
    obj[item1.key] = {
    key: item1.key,
    label: item1.label
    };
    }
    });
    });
    const result = Object.values(obj);
    return result;
    }
    ```
    image.png

    2023-11-16 17:57:46
    赞同 1 展开评论 打赏
  • 你可能需要在子表的成员组件中获取数据,然后将这些数据添加到主表的多选框。这通常可以通过事件处理程序来实现。

    以下是一个基本的步骤:

    1. 在子表的成员组件中创建一个方法,该方法用于获取子表的数据。例如,如果你正在使用 Angular,你可以创建一个 getMemberData() 方法。

    2. 在主表的多选框中创建一个方法,该方法用于接收和设置选项。例如,你可以创建一个 setOptions(data) 方法。

    3. 当子表的成员组件中的数据发生变化时,调用 getMemberData() 方法并将结果传递给主表的 setOptions(data) 方法。

    请注意,具体的实现方式取决于你正在使用的编程语言和框架。以上只是一个基本的概念。

    2023-11-16 17:09:06
    赞同 展开评论 打赏
问答分类:
问答地址:
关联地址:
来源圈子
更多
收录在圈子:
+ 订阅
「宜搭」是云钉原生低代码平台(钉钉 PaaS - aPaaS),让企业应用搭建更简单! 帮助中小企业降本提效,加强组织的数字化自主权; 帮助大型企业释放个体创新力,助力组织创新涌现。
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载