在 Element UI 的 el-table
组件中,可以使用 el-input
组件在单元格中添加输入框。下面是一个示例:pgsqlCopy
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄">
<template slot-scope="{ row }">
<el-input v-model="row.age"></el-input>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20 },
{ name: '李四', age: 25 },
{ name: '王五', age: 30 }
]
}
}
}
</script>
在上面的示例中,我们在 el-table-column
中使用了一个插槽,将 el-input
组件插入到单元格中。使用 slot-scope
属性可以访问到当前行的数据,从而将输入框绑定到对应的数据上。
需要注意的是,由于 el-input
组件是一个受控组件,因此必须在 data
选项中为每一行数据定义一个初始值。在示例中,我们将每一行的 age
属性设置为一个初始值。
此外,还可以为 el-input
组件添加其他属性,例如 size
、placeholder
等。
需要注意的是,在单元格中添加输入框可能会影响表格的交互体验,因此应该根据实际需求进行选择。