data 中声明数据，更新模板绑定数据，资源分类功能需要请求接⼝操作。 声明的数据名称需要根据接⼝请求参数设置，最后将 form 整体发送给接⼝ 添加⼀个重置按钮 form: { // 资源名称 name: ‘’, // 资源路径 url: ‘’, // 资源分类 categoryId: ‘’ … }, :inline=“true” :model=“form” class=“demo-form-inline”> label=“资源名称”> v-model=“form.name” placeholder=“资源名称”> label=“资源路径”> v-model=“form.url” placeholder=“资源路径”> label=“资源分类”> v-model=“form.categoryId” placeholder=“资源分类”> label=“区域⼀” value=“shanghai”> label=“区域⼆” value=“beijing”> type=“primary” @click=“onSubmit”>查询搜索 重置

查询资源分类列表：接⼝地址

// 新建⽂件 services/resource-category.js import request from ‘@/utils/request’ // 资源分类请求 export const getResourceCategory = () => { return request({ method: ‘GET’, url: ‘/boss/resource/category/getAll’ }) }

引⼊并请求数据

… import { getResourceCategory } from ‘@/services/resource-categor y.js’ … created () { … this.loadResourceCategory() }, … data () { return { // 资源分类列表 resourceCategories: [], … } }, methods: { async loadResourceCategory () { const { data } = await getResourceCategory() if (data.code === ‘000000’) { this.resourceCategories = data.data } }, …

遍历⽣成资源分类下拉菜单

label=“资源分类”> v-model=“form.categoryId” placeholder=“资源分类”> :label=“item.name” :value=“item.id” v-for=“item in resourceCategories” :key=“item.id” >

提交时请求数据，同时更改⻚数为1。

onSubmit () { // 筛选提交，请求数据 (将请求参数更改为整个 form) this.form.current = 1 this.loadResources() }, … async loadResources () { // 将参数传⼊请求 /* const { data } = await getResourcePages({ current: this.form.current, size: this.form.size }) */ const { data } = await getResourcePages(this.form) … },