el-table在列表的输入框里面点击弹窗有弹窗组件el-table选择人员 ，把选中的人员带到el-table输入框里面

### 实现Element UI `el-table` 中点击输入框弹出选择人员的弹窗并回填

为了实现在 Element UI 的 `el-table` 组件中集成弹窗组件以选择人员并将选中结果填充到对应的输入框，可以按照以下方式构建：

#### HTML 结构
定义表格列时，在需要显示输入框的位置使用自定义模板来嵌入带有事件监听器的输入控件。

<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-input 
            v-model="scope.row.personnelInfo"
            readonly
            @focus="openPersonnelSelector(scope.$index)">
          </el-input>
        </template>
      </el-table-column>
    </el-table>

    <!-- 选择人员对话框 -->
    <el-dialog title="选择人员" :visible.sync="dialogVisible" width="30%">
      <el-tree ref="personTree" :data="personnelOptions" show-checkbox node-key="id" default-expand-all></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmSelection">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

#### JavaScript 部分逻辑处理
通过 Vue.js 方法管理状态变化以及交互行为。

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', personnelInfo: '' },
        { name: '李四', personnelInfo: '' }
      ],
      dialogVisible: false,
      currentRowIdx: null, // 记录当前聚焦行索引
      personnelOptions: [] // 假设这是从服务器获取的人事结构化数据
    };
  },
  methods: {
    openPersonnelSelector(index) {
      this.currentRowIdx = index;
      this.dialogVisible = true;

      // 这里模拟异步加载人事选项列表
      setTimeout(() => {
        this.personnelOptions = [
          { id: 1, label: '员工A' }, 
          { id: 2, label: '员工B' }
        ];
      }, 500);
    },
    confirmSelection() {
      const selectedNodes = this.$refs['personTree'].getCheckedNodes();
      
      if (selectedNodes.length === 0 || !this.currentRowIdx) return;

      let selectedNames = selectedNodes.map(node => node.label).join(', ');
      this.tableData[this.currentRowIdx].personnelInfo = selectedNames;

      this.dialogVisible = false;
    }
  }
};
</script>

上述代码展示了如何创建一个简单的界面用于展示表格，并允许用户点击特定单元格内的输入框触发弹窗选择人员。当选择了某些项之后，这些项目的名称会被组合成字符串形式赋给对应行的数据字段[^1]。