在 el-table 中嵌入 el-checkbox el-input el-upload 多组件，实现复杂业务场景

在Element UI中，el-table 是一个用于展示数据表格的组件，而 el-checkbox、el-input 和 el-upload 分别是复选框、输入框和文件上传组件。你可以在 el-table 的每一行中嵌入这些组件来实现复杂的业务场景。

以下是一个简单的例子，展示如何在 el-table 的每一行中嵌入这三个组件：

<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-checkbox v-model="scope.row.checked">选项</el-checkbox>
        <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
        <el-upload
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :limit="3"
          :on-exceed="handleExceed"
          :file-list="fileList">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        checked: false,
      }, {
        date: '2016-05-04',
        name: '李小虎',
        checked: false,
      }],
      fileList: []
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传 ${this.limit} 个文件！`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
}
</script>

在这个例子中，每个 el-table-column 使用 slot-scope 来访问当前行的数据，并在每行中放置了 el-checkbox、el-input 和 el-upload 组件。这样就可以在 el-table 中管理复杂的业务逻辑。记得在使用时要根据实际的数据结构和业务需求来调整这些组件的绑定值。