vue3:十八、内容管理-搜索栏的完善
一、实现效果
实现搜索框的下拉选项，单选，时间区间，数字区间
二、修改之前代码问题
1、修改状态请求api
(1)显示状态查询
把mock返回的data数据修改为数组形式
(2)审核状态查询
同上
2、修改之前页面数据
在获取状态和审核状态时，数据通过循环进行获取，格式为value:label
三、基础实现
1、搜索下拉菜单-分类
（1）增加分类的接口查询
在分类接口中增加分类查询方法getCategoryList
(2)引入方法
(3)获取分类数据
定义一个数组categoryData，并调用categoryData请求获取到数据res.data，并对其进行处理获取到[{value:‘值’,label:‘名称’}]的形式
将下拉列表的条件和数据写入分类这一项中
2、搜索单选-显示
(1)处理数据
在获取状态信息的时候重新定义一个新变量，专门用于存储[{value:‘’,label:‘’}]的信息，也就是直接获取数据库传递的数据
(2)在字段中加入单选
3、搜索下拉菜单-审核状态
在审核状态中，直接写入下拉列表的数据
4、时间区间-发布时间
在字段的类型中写入daterange
5、自定义数字区间-点击量
(1)在搜索组件加入自定义数字区间
(2)解决数字区间这种数组问题的默认值
如果为数字区间这种情况，应该设置默认值为数组，否则会报错
(3)增加全局边距样式
增加全局样式main.css中左外边距5像素
(4)主页面中写入类型
四、完整代码
1、内容管理
src/views/ContentView.vue
<template setup><Table :columns="columns" :apiUrl="apiUrl" :formData="formData" :searchShow="true" :pageShow="true" @update:tableData="updateTableData"><template #tag="{ row }"><el-tag v-for="item, index in row.tag" :key="index">{{ item }}</el-tag></template><template #status="{ row }"><el-switch v-model="row.status" :loading="row.loading || false":before-change="beforeChange.bind(this, row)" :active-value="1" :inactive-value="0":active-text="statusObj[1]" :inactive-text="statusObj[0]" inline-prompt /></template><template #audit="{ row }"><el-tag :type="row.audit == 1 ? 'success' : row.audit == 2 ? 'danger' : 'primary'">{{ auditObj[row.audit]}}</el-tag><div v-if="row.audit == 0"><el-button type="success" size="small" @click="handleAudit(row,1)">通过</el-button><el-button type="danger" size="small" @click="handleAudit(row,2)">拒绝</el-button></div></template><template #coverimage="{ row , index }"><el-imagestyle="width: 100px; height: 100px":src="row.coverimage":zoom-rate="1.2":max-scale="7":min-scale="0.2":preview-src-list="srcList"show-progress:initial-index="initialindex"fit="contain":preview-teleported="true"hide-on-click-modal@show=showImage(index)/></template></Table>
</template>