el-table中加入el-input

可以在el-table的列定义中使用自定义模板来实现在表格中加入el-input。具体步骤如下：

1. 在el-table-column中设置scoped-slot属性，指定自定义模板的名称，例如：

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

2. 在el-table中设置data属性，指定表格数据源，例如：

<el-table :data="tableData">
  <!-- 列定义 -->
</el-table>

3. 在Vue实例中定义tableData数组，例如：

data() {
  return {
    tableData: [
      { name: '张三', age: 18 },
      { name: '李四', age: 20 },
      { name: '王五', age: 22 }
    ]
  }
}

这样就可以在表格中显示el-input，并且可以通过v-model绑定数据源中的值。

相关问题

<el-table :data="membersList" style="width: 100%"> <el-table-column type="index" label="序号" align="center" width="80"></el-table-column> <el-table-column label="考勤人员" align="center"> <el-table-column label="姓名" prop="memberName" align="center"></el-table-column> <el-table-column label="岗位" prop="post" align="center"></el-table-column> </el-table-column> <el-table-column label="出勤天数" prop="attendanceDays" align="center"></el-table-column> <el-table-column label="岗位系数" prop="postFactor" align="center"></el-table-column> <el-table-column label="调整系数" align="center"> <template slot-scope="scope"> <div> <el-input-number v-model="scope.row.adjustFactor" :precision="2" :step="0.01" :max="0.15" :min="-0.15" size="small" @change="changeFinal(scope.row)" ></el-input-number> </div> </template> </el-table-column> <el-table-column label="最终考勤天数" prop="finalDavs"></el-table-column> </el-table> <div class="membersDays"> <span>合计</span> <span>{{membersDaysJs}}</span>天 </div>

根据您的代码，我发现您的计算属性名为`membersDaysJs`，但是在模板中使用时没有加上括号`()`，因此无法正确调用这个计算属性。您需要将`{{membersDaysJs}}`修改为`{{membersDaysJs()}}`。这应该可以解决computed不生效的问题。

所以，您的模板应该是这样的：

<el-table :data="membersList" style="width: 100%">
  <!-- 表格列定义 -->
</el-table>
<div class="membersDays">
  <span>合计</span>
  <span>{{membersDaysJs()}}</span>天
</div>

<el-table-column prop="remark" label="下单制作特殊说明"> <template slot-scope="scope"> <el-input v-model="scope.row.remark" @click="stopPropagation" @mousedown.prevent></el-input> </template> </el-table-column> <el-table-column show-overflow-tooltip width="50" prop="message" label="说明"></el-table-column> <el-table-column show-overflow-tooltip width="50" prop="user" label="运营者"></el-table-column> <el-table-column label-class-name="DisabledSelection" align="center" type="selection" width="90"> </el-table-column>输入框输入影响全选

根据提供的代码，可以看到 "remark" 列对应的输入框绑定了一个 @click 和 @mousedown.prevent 事件，这些事件会阻止事件冒泡和默认行为。这可能会导致在点击输入框时，阻止了表格行被选中的默认行为，从而影响到了全选功能。因此，建议在 @click 和 @mousedown.prevent 事件中，除了阻止默认行为外，也应该手动触发表格行的选中事件，以确保全选功能正常工作。

具体地，可以在事件处理函数中添加以下代码：

stopPropagation(event) {
  // 阻止事件冒泡和默认行为
  event.stopPropagation();
  event.preventDefault();
  
  // 触发表格行的选中事件
  this.$refs.table.toggleRowSelection(this.scope.row);
}

其中，$refs.table 可以替换为你表格组件的引用名。这样，当用户点击输入框时，不仅阻止了默认行为，还手动触发了表格行的选中事件，从而确保全选功能正常工作。