开发者社区 问答 正文

代码给子表中的部门组件(全路径)赋的值,如何通过该组件的值拿到对应的主部门,并且赋值给同一个子表

代码给子表中的部门组件(全路径)赋的值,如何通过该组件的值拿到对应的主部门,并且赋值给同一个子表的单行文本控件

展开
收起
游客ufdvp5srprsrg 2023-12-06 11:14:44 131 分享 版权
来自: 钉钉宜搭
1 条回答
写回答
取消 提交回答
  • 面对过去,不要迷离;面对未来,不必彷徨;活在今天,你只要把自己完全展示给别人看。

    假设您使用的是 Vue.js 框架,并且您的数据结构如下:

    data() {
      return {
        tableData: [
          {
            id: 1,
            fullPath: '部门A/部门B/部门C',
            department: '部门C'
          },
          {
            id: 2,
            fullPath: '部门D/部门E/部门F',
            department: '部门F'
          }
        ]
      }
    }
    

    您可以使用以下方法通过子表中的部门组件(全路径)获取对应的主部门,并将其赋值给同一个子表的单行文本控件:

    <template>
      <div>
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>部门全路径</th>
              <th>部门</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in tableData" :key="index">
              <td>{{ item.id }}</td>
              <td>{{ item.fullPath }}</td>
              <td>
                <input type="text" v-model="item.department" />
                <button @click="updateDepartment(item)">更新部门</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          tableData: [
            {
              id: 1,
              fullPath: '部门A/部门B/部门C',
              department: '部门C'
            },
            {
              id: 2,
              fullPath: '部门D/部门E/部门F',
              department: '部门F'
            }
          ]
        }
      },
      methods: {
        updateDepartment(item) {
          const departmentIndex = item.fullPath.lastIndexOf('/');
          if (departmentIndex !== -1) {
            item.department = item.fullPath.slice(departmentIndex + 1);
          } else {
            item.department = '';
          }
        }
      }
    }
    </script>
    

    在这个例子中,我们使用了 Vue.js 的 v-model 指令将输入框的值与子表的 department 属性进行双向绑定。当点击“更新部门”按钮时,会触发 updateDepartment 方法,该方法会根据子表的 fullPath 属性获取对应的主部门,并将其赋值给 department 属性。

    2023-12-07 21:44:51
    赞同 展开评论
问答分类:
问答地址: