fsadmin框架的selectpage组件怎么加自定义查询条件的同时显示多字段,条件是点击的id
时间: 2024-05-08 08:15:57 浏览: 13
要实现在fsadmin框架的selectpage组件中加入自定义查询条件同时显示多个字段,可以按照以下步骤进行:
1. 在selectpage组件的模板中添加需要显示的字段,例如:
```
<template>
<div>
<el-table :data="tableData" border>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</template>
```
2. 在组件的脚本中定义需要传递的查询条件,例如:
```
<script>
export default {
data() {
return {
tableData: [],
queryParam: {
id: '',
name: '',
age: ''
}
}
},
methods: {
handleSearch() {
// 调用查询接口,根据queryParam进行查询
},
handleSelectItem(item) {
this.queryParam.id = item.id;
this.handleSearch();
}
}
}
</script>
```
3. 在selectpage组件中添加点击事件,触发handleSelectItem方法,将需要传递的查询条件设置好,例如:
```
<template>
<div>
<el-select v-model="value" @change="handleSelectItem">
<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
<el-table :data="tableData" border>
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</div>
</template>
```
在以上示例代码中,我们在el-select组件中加入了@change事件,当用户选择一个选项时,会触发handleSelectItem方法,将所选项的id设置到queryParam中的id字段中,然后调用查询接口进行查询。在el-table组件中展示需要显示的字段。
需要注意的是,以上代码仅为示例代码,具体实现需要根据实际需求进行调整和修改。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)