element-ui的表格中嵌套文本框
时间: 2024-10-13 14:12:58 浏览: 36
vue+element创建动态的form表单及动态生成表格的行和列
5星 · 资源好评率100%
Element UI的表格组件`el-table`支持通过自定义单元格模板(cell template)来实现复杂的展示需求,包括嵌套的文本框。你可以创建一个包含Vue实例的`v-node`并在表格单元格内渲染,例如一个`el-input`元素,来实现在表格行中编辑的文本框。下面是一个简单的示例:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="content" label="内容">
<template slot-scope="scope">
<el-input v-model="scope.row.content" placeholder="请输入内容"></el-input>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', content: '' },
{ name: '李四', content: '初始文本' }
]
};
}
};
</script>
```
在这个例子中,当点击某一行的“内容”列,会显示一个可以输入或编辑的文本框,该文本框绑定到了当前行的`content`属性上。
阅读全文