vue2 element ts 写一个带请求的 查询页面
时间: 2023-06-06 10:08:24 浏览: 51
好的,我可以帮您解答这个问题。首先,您需要安装 Element UI 和 Axios 库。然后您需要创建一个 Vue 组件,在组件中引入 ElementUI 的表格组件,并且定义请求参数和返回数据的类型接口。接着您需要在组件中定义一个 axios 的 post 请求函数,将请求参数和请求地址传入,并将返回的数据赋值给表格数据源变量。最后您需要在模板中渲染表格组件和请求按钮。以下是示例代码:
```typescript
<template>
<div>
<el-form :model="form" inline>
<el-form-item label="关键字">
<el-input v-model="form.keyword" placeholder="请输入关键字"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search">查询</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="desc" label="描述"></el-table-column>
</el-table>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { AxiosResponse } from 'axios'
import { Form, TableData, SearchParams } from './types'
@Component({})
export default class QueryPage extends Vue {
form: Form = {
keyword: '',
}
tableData: TableData[] = []
search() {
const params: SearchParams = {
keyword: this.form.keyword,
}
const url = 'your search api url'
this.$axios.post(url, params).then((response: AxiosResponse) => {
this.tableData = response.data.data || []
})
}
}
</script>
```
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)