element框架 el-table嵌套input 实现表单（pc端）

在Element UI中，el-table 是用来展示数据的，而 el-input 是用来输入数据的。如果你想在 el-table 中嵌套 el-input 以实现表单的功能，可以在 el-table-column 中使用 template 或者 scoped slot 来渲染 el-input。

以下是一个简单的例子，展示了如何在 Element UI 的 el-table 中嵌套 el-input：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column label="成绩">
      <template slot-scope="scope">
        <el-input v-model="scope.row.score" placeholder="请输入内容"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '张三',
        score: ''
      }, {
        date: '2016-05-04',
        name: '李四',
        score: ''
      }, {
        date: '2016-05-01',
        name: '王五',
        score: ''
      }, {
        date: '2016-05-03',
        name: '赵六',
        score: ''
      }]
    }
  }
}
</script>

在这个例子中，我们定义了一个包含日期、姓名和成绩的 tableData 数组。在 el-table-column 中使用 slot-scope 接收作用域插槽的参数 scope，然后在 template 中渲染 el-input，并将 scope.row.score 绑定到 el-input 的 v-model，实现动态输入成绩的功能。