1.快速一览!
2.基本使用方式
2.1主文件使用
<template>
<SearchTableBase
:searchFilterData="searchFilterData"
:columns="columns"
:operateData="operateData"
:request="request"
dataUrl="/test"
/>
</template>
2.2参数介绍
2.2.1 searchFilterData
该项确定查询条件
const searchFilterData = reactive([
{
label:'哈哈哈哈哈哈哈', // 查询条件名字
type:'input', // 查询条件的类型
key:'aaa' //查询条件对应的key,当前组件会自动把key加入到查询接口的参数中
},
{
label: '2',
type: 'select',
key: 'bbb',
selectList: [ // 选择项
{
label: '测试1', // 展示的title
key: '1' // 对应的key
}
]
},
{
label: '3',
type: 'datePicker',
key: 'ccc'
},
{
label: '4',
type: 'treeSelect',
key: 'ddd'
},
{
label:'5',
type:'datePicker',
key:'eee'
},
{
label:'6',
type:'treeSelect',
key:'fff'，
data: [ // 和element-plus中的data格式一致
{
value: '1',
label: 'Level one 1',
children: [
{
value: '1-1',
label: 'Level two 1-1',
children: [
{
value: '1-1-1',
label: 'Level three 1-1-1'
}
]
}
]
},
{
value: '2',
label: 'Level one 2',
children: [
{
value: '2-1',
label: 'Level two 2-1',
children: [
{
value: '2-1-1',
label: 'Level three 2-1-1'
}
]
},
{
value: '2-2',
label: 'Level two 2-2',
children: [
{
value: '2-2-1',
label: 'Level three 2-2-1'
}
]
}
]
},
{
value: '3',
label: 'Level one 3',
children: [
{
value: '3-1',
label: 'Level two 3-1',
children: [
{
value: '3-1-1',
label: 'Level three 3-1-1'
}
]
},
{
value: '3-2',
label: 'Level two 3-2',
children: [
{
value: '3-2-1',
label: 'Level three 3-2-1'
}
]
}
]
}
]
},
])
2.2.2 operateData
第二
const operateData = [
{
name: '批量删除任务', // 按钮名字
operate: batchDel // 点击按钮对应的操作
},
{
name: '批量删除任务',
operate: batchDel
},
]
2.2.3 columns
该项确定当前列表展示的数据
const columns = [
{
label:'id', // 表头
prop:'id' // 当前列对应的key
},
{
label:'firstname',
prop:'firstname'
},
{
label:'lastname',
prop:'lastname'
},
{
label:'tesst',
render: (params,h) => {
// 这里有个render函数,接受两个参数,一个是params(当前行的数据),一个是h函数,可以由用户自己决定当前列展示什么
console.log(params,'params')
return h(
ElButton,
{
},
'按钮'
)
}
}
]
2.2.4 request
这里需要传入一个查询的函数,因为每个项目中封装的查询接口可能都不一样,有的是基于fetch,有的是axios,所以这里需要传入一个使用者封装好的查询函数,这个函数会接受一个对象,这个对象包括url(查询接口的url),以及data(查询条件),这个data包括,2.2.1中的查询条件和翻页参数。最后要求把请求到的数据返回回去，交给组件内部。
const request = ( params:any ) =>{
return new Promise((resolve,reject)=>{
WsRequest.post({...params}).then((res:any)=>{
resolve(res)
}).catch((err:any)=>{
reject(err)
})
})
}
2.2.5 dataUrl
这里就是一个查询的url，在2.2.4会在params中给返回
3.介绍每部分
我把这个组件主要分为三部分，分别是最上面的查询条件部分，中间的按钮部分，以及表格和分页部分，接下来依次介绍
3.1 查询条件部分
查询条件部分由传入的searchFilterData控制，当前查询条件目前支持input，select，datePicker，treeSelect，需要在配置项中配置不同的type使用；
3.1.1 特点1.
当前查询条件会基于屏幕不同尺寸显示不同的数量，比如在1920×1280屏幕下会显示4个查询条件，而在屏幕较小的屏幕下会展示较少少的查询条件
3.1.2 特点2
当查询条件过多的时候支持点击高级查询，从而展示更多的查询条件并使用，
如下，目前屏幕是1920的，默认展示4个查询条件，当查询条件过多时，可以点击高级查询，然后会全部平铺出来供用户查询使用，同时还支持重置查询条件
3.2 中间按钮部分
按钮部分由传入的operateData控制，默认展示4个按钮，当用户传入更多按钮会以下拉的形式展示
3.3 table和分页部分
table部分经过一个最简单的封装，可以方便快速的画页面
3.3.1 特点1
这里用户可以传入一个render函数，组件会给这个函数传递两个参数,一个是params(当前行的数据),一个是h函数,可以由用户自己决定当前列展示什么，相对来说比较自由，如下当我columns传入render函数时，会渲染出来一个按钮在table中
const columns = [
{
label: 'id',
prop: 'id'
},
{
label: 'firstname',
prop: 'firstname'
},
{
label: 'lastname',
prop: 'lastname'
},
{
label: 'tesst',
render: (params, h) => {
console.log(params, 'params')
return h(ElButton, {}, '按钮')
}
}
]
渲染结果
3.3.2 特点2
该组件可以自动管理page参数，不需要用户管理
