el-table 文本和输入框上下排列

要实现 el-table 中文本和输入框的上下排列，可以使用 el-table-column 的 scoped slot 和自定义模板来实现。

首先，在 el-table-column 中设置 scoped slot，例如：

<el-table-column label="姓名">
  <template slot-scope="scope">
    <div>{{ scope.row.name }}</div>
    <el-input v-model="scope.row.name"></el-input>
  </template>
</el-table-column>

在 scoped slot 中，我们可以使用 scope.row 获取当前行的数据，然后分别渲染文本和输入框。

需要注意的是，el-input 组件的 v-model 绑定的是当前行的 name 属性，这样就可以实现文本和输入框的联动。

这样，el-table 中的文本和输入框就可以实现上下排列了。

相关问题

el-table-column 加el-input 不显示输入框

el-table-column 是 Element UI 中的表格列组件，而 el-input 是 Element UI 中的输入框组件。如果在 el-table-column 中使用 el-input，但是输入框不显示的话，可能是由于以下几个原因：

1. 没有正确引入 Element UI 组件库：请确保已经正确引入了 Element UI 组件库，并且在使用 el-table-column 和 el-input 之前进行了初始化。

2. 没有设置合适的 prop 属性：在 el-table-column 中使用 el-input 时，需要设置 prop 属性来指定数据源中对应的字段。例如，如果数据源中有一个字段叫做 "name"，那么可以设置 prop="name"。

3. 没有设置合适的 slot-scope 属性：在 el-table-column 中使用 el-input 时，需要设置 slot-scope 属性来指定作用域插槽的名称。例如，可以设置 slot-scope="{ row }"，然后在 el-input 中使用 row.name 来绑定数据。

4. CSS 样式问题：可能是由于 CSS 样式的问题导致输入框不显示。可以检查一下是否有设置了隐藏或者覆盖了输入框的样式。

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]。