el-table 在表头中嵌入input框
时间: 2023-10-27 10:29:48 浏览: 200
vue el-table实现自定义表头
可以在表头中使用 `scoped-slot`,在 `scoped-slot` 中使用 `el-input` 组件来实现在表头中嵌入 `input` 框。
示例代码如下:
```html
<el-table :data="tableData">
<el-table-column label="姓名">
<template slot-scope="scope">
<el-input v-model="searchName" placeholder="请输入姓名"></el-input>
</template>
</el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
```
在上述示例中,我们在表头中的姓名列中使用了 `scoped-slot`,并在 `scoped-slot` 中使用了 `el-input` 组件。注意,我们需要将 `v-model` 绑定到一个变量(例如 `searchName`),以便在搜索时获取 `input` 框中的值。
阅读全文