首先,确保你已经引入了 Element UI 的库和样式文件。然后,你可以像下面这样使用输入框组件在表格中的特定列中:
<template>
<div>
<el-table :data="tableData">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column label="Input Column">
<template slot-scope="scope">
<el-input v-model="scope.row.inputValue"></el-input>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: "Item 1", inputValue: "" },
{ name: "Item 2", inputValue: "" },
{ name: "Item 3", inputValue: "" }
]
};
}
};
</script>
在上面的代码中,我们使用了 scoped slot
来自定义 "Input Column" 这一列的内容。在 slot-scope
中,scope
对象提供了对当前行数据的访问,我们使用 scope.row.inputValue
来双向绑定输入框的值。这样,每一行的输入框都可以独立地与对应行的数据进行交互。