vue3:十三、分类管理-表格--模糊查询搜索框

一、效果

实现动态搜索列表，实现文本框、下拉列表、时间、单选等组件封装

实现精准查询、模糊查询

实现默认搜索数据展示

实现字段的显示与隐藏

二、基本信息配置

1、官网参考

Form 表单 | Element Plus

这里的模糊查询列表采用行内表单

2、创建搜索列表组件

在components组件中加入查询的组件页面Search.vue

三、分类父页面

在分类页面的主页面修改传递的数据信息

1、修改父分类下拉列表获取方式

(1)初始定义

引入ref方法，并且定义一个新数组parentOptions = ref([ ])

将默认的一条数据写入其中:{ label: '无', value: 0 }

(2)下拉数组数据修改

将下拉列表获取的数组存入到数组parentOptions中

(3)修改表单数据传递的数据

将存入下拉列表数据传入到表单数据的options中

2、修改表格列的基本信息(适配搜索列表)

(1)增加类型

在columns中增加搜索框的类型searchFormType，默认是text文本框(可以不写)，特别的写入如这里的select

(2)增加子项(下拉、单选等)

这里的下拉列表需要下拉列表的数据，通过写入方法searchList，返回其列表值即可

(3)增加默认值

写入字段dafaultValue,其值为默认的value

例如：{label:'父分类1',value:1}，那这里的默认值就是1

 

(4)增加查询方式

这里查询方式默认是模糊查询like和精准查询默认为空

这里写入一个字段search,如果是需要模糊查询就加入值'like'

(5)增加隐藏搜索字段

写入字段searchHide,其值为true表明需要隐藏该字段的搜索信息

四、表格组件

1、引入、使用搜索列表组件

在表格组件中引入search组件

(1)方法引入

在表格组件中引入搜索组件Search.vue

(2)视图层使用

在表格组件的视图层写入Search组件

2、写入子组件提交调用的方法

在搜索框提交进行搜索时需要使用父组件的方法，将需要搜索的数据传递给查询表格数据的请求方法中以便实现数据查询

(1)组件中写入方法

写入方法submitSearch，这里是子组件调用父方法写法

(2)创建空对象

创建一个空对象，用于专门存储传入后端的搜索数据

(3)将搜索数据存入数据请求

在获取表格数据的请求中，将搜索的对象这个参数传入后端

(4)父页面方法的编写

子组件执行该方法的时候传递了一个参数，这里使用data进行获取（存储的是传递的搜索数据,例如{ id: '1', pid: 2, name: '2', desc: '' }）

• 循环传递的数据
  • const element = data[key]获取 data[key] 每一项的值(后续要处理)
  • 循环总的columns数组(需要获取是否有搜索方式search：决定以什么方式查询数据)
    • const el = props.columns[k];获取columns数组的值，例如首项的值：{ label: '分类ID', field: 'id', width: 120, searchFormType: 'text' }
    • if (el.field == key)判断每一项field字段的值和搜索对象的key是否一致
      • if (typeof el.search != 'undefined')如果一致判断，columns中的项是否含有search
        • 一致设置数组searchField的值，为数组{opt:搜索方式,value:搜索的值}
      • 不一致：设置searchField的值还是为原始数据即这里的element

// 执行搜索功能
const submitSearch = (data) => {console.log('需要搜索的数据:', data); //例如 { id: '1', pid: 2, name: '2', desc: '' }//处理这里的搜索条件for (const key in data) {if (Object.hasOwnProperty.call(data, key)) {const element = data[key]; //获取搜索对应的字段key的值：例如查询到key为id时,这里的element就是id的值为1；查询第二项时key为pid时,这里的element就是pid的值为2//循环表头columnsfor (const k in props.columns) {if (Object.hasOwnProperty.call(props.columns, k)) {const el = props.columns[k];//获取表头对应的key的值// console.log('搜索条件:', el);  //例如 columns的值为[{ label: '分类ID', field: 'id', width: 120, searchFormType: 'text' },{ label: '分类名称', field: 'name', width: 200, search: 'like' }]//那这里第一条循环的el的值就是{ label: '分类ID', field: 'id', width: 120, searchFormType: 'text' }// console.log('搜索字段:', el.field);if (el.field == key) { // k