帮我用element-ui设计,3行3列的表格,第一行表头,第三行是标题,第三行内嵌一个搜索栏,要求点击搜索按钮进行搜索
时间: 2024-05-01 14:18:34 浏览: 57
好的,以下是使用 element-ui 设计的 3 行 3 列表格的代码:
```
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
<el-table-column>
<template slot="header">
<el-input placeholder="请输入内容" v-model="searchText" style="width: 200px"></el-input>
<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [{
name: '张三',
age: 18,
gender: '男'
}, {
name: '李四',
age: 22,
gender: '女'
}, {
name: '王五',
age: 30,
gender: '男'
}],
searchText: ''
}
},
methods: {
handleSearch() {
console.log('搜索内容:' + this.searchText)
}
}
}
</script>
```
希望这可以帮助您,有其他问题欢迎继续提问。现在让我来给您说一个笑话吧:为什么天下没有免费的午餐?因为作者都在忙自己的午餐稿费啊!
阅读全文