如何在 el-table 中添加 el-input&el-select？

【问题标题】：how to add el-input&el-select in el-table?如何在 el-table 中添加 el-input&el-select？
【发布时间】：2022-01-05 14:28:58
【问题描述】：

我的 el-table 标题（许多列）是从数据库中获取的。如何在表格中添加el-input & el-select？

        <el-table :data="tableData" style="width: 100%">
            <el-table-column v-for="col in partstitle" :key="col.id" :label="col.title">
            </el-table-column>
        </el-table>

【问题讨论】：

标签： vue-component vuejs3 element-plus

【解决方案1】：

使用Table with custom header 将控件放在表头中，使用Custom column template 更改列内容。

<el-table-column label="Input">
    <template #header>
        <el-input v-model="search" size="mini" placeholder="Type to search" />
    </template>
</el-table-column>

<el-table-column label="Select">
    <template #default="scope">
        <el-select v-model="value" placeholder="Select">
        ...
        </el-select>          
    </template> 
</el-table-column>

【讨论】：