宜搭表格下单元格添加点击事件

• 场景宜搭单元格上没有点击事件，需要点击行，将这一行的某个字段带入到关联表单上进行赋值
• 点击单元格是关联表单没有点击事件，所以特意要给每行加点击事件，为了拿到这一行上的数据

• 表单 1

• 页面 JS

  /**
  * TableField onChange
  */
  export function onChangeTable({ value, extra }) {
    const { formGroupId } = extra || {};
  
    if (formGroupId) {
      this.getTableData();
    }else {
      setTimeout(() => {
        this.getTableData();
      }, 500);
    }
  
  }
  
  // 获取表格数据，给部件选配加点击事件
  export function getTableData() {
    // 获取表格
    var table = document.querySelector('.table-field-layout-table');
    // 获取表格中的所有行
    var rows = table.querySelectorAll('.table-field-table-row');
  
    for (var i = 0; i < rows.length; i++) {
      const tmpIndex = i;
      var cells = rows[i].querySelectorAll('.table-field-table-cell'); // 获取当前行的所有单元格
      for (var j = 0; j < cells.length; j++) {
        if (cells[j].querySelectorAll('.associationFormField_m053cs4m')) { // 检查单元格是否有类名 'xxx'
          cells[j].addEventListener('click', () => {
            // 这里编写点击事件的处理函数
            let data = this.$('tableField_m053cs3l').getValue();
            if (data[tmpIndex].textField_m053cs4l) {
              window.componentObj = {
                name: data[tmpIndex].textField_m053cs4l
              }
            } else {
              window.componentObj = {
                name: ""
              }
            }
          });
        }
      }
    }
  
  }
  

• 关联表单 2

• 页面 JS

  // 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
  export function didMount() {
    console.log(`「页面 JS」：当前页面地址 ${location.href}`);
    // 拿到名称进行赋值
    if (window.componentObj) {
      let tmpValue = window.componentObj.name;
      this.$('selectField_lpzh3j3y').setValue(tmpValue);
    }
    // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
    // 更多 this 相关 API 请参考：https://www.yuque.com/yida/support/ocmxyv#OCEXd
    // document.title = window.loginUser.userName + ' | 宜搭';
  
  }