buildadmin+tp8表格操作(5)自定义组装搜索的查询

有时候我们会自定义组装一些数据,发送给后端,让后端来进行筛选,这里有一个示例

js 复制代码
const onComSearchIdEq = () => {
    // 展开公共搜索
    baTable.table.showComSearch = true
    /**
     * 公共搜索表单赋值
     * 范围搜索有两个输入框,输入框绑定变量分别为 `字段名-start` 和 `字段名-end`
     * 当前是范围搜索的等于示例,所以 start 和 end 均为1
     */
    baTable.comSearch.form = Object.assign(baTable.comSearch.form, {
        'id-start': 1,
        'id-end': 1,
    })

    /**
     * 组装发送给服务端的筛选条件数据
     */
    const fieldDataTemp = baTable.comSearch.fieldData.get('id') // 获取 id 字段的公共搜索数据,它由 baTable 自动初始化
    if (fieldDataTemp) {
        // 筛选数据组装
        let comSearchData: comSearchData = {
            field: 'id', // 筛选字段
            val: '1,1', // 范围查询的 start 值和 end 值,直接使用逗号分隔
            operator: fieldDataTemp.operator, // 公共搜索操作符号
            render: fieldDataTemp.render, // 字段渲染方案
        }
        let index = getArrayKey(baTable.table.filter!.search!, 'field', 'id') // 查询是否已经有 id 字段的筛选数据
        if (!index) {
            // push 到要发送给服务端的筛选条件数组中
            baTable.table.filter!.search!.push(comSearchData) // 无则 push
        } else {
            baTable.table.filter!.search![index] = comSearchData // 有则重新赋值
        }

        // 重新请求表格数据(刷新表格)
        baTable.onTableHeaderAction('refresh', {})
    } else {
        console.log('没有找到 id 字段的公共搜索数据,因为该字段禁止了公共搜索')
    }
}

从上面的代码中, 可以看到, 主要是组装了一个 comSearchData的数组,之后调用, baTable.onTableHeaderAction('refresh',{}) 的方法刷新了一下表格就可以了。

为什么是这样就可以了

找到 refresh 方法, 调用了 getIndex()方法

找到index 的方法,这里有一个 this.table.filter

找到 filter ,可以看到 comSearchDAta 是在这里的,也就是说表格每一次刷新,都会使用搜索中的数据

所以, 我们更改了 comSearchData之后,直接刷新表格,就有效果了

相关推荐
A黄俊辉A10 个月前
buildadmin+tp8表格操作(7.1)表格的事件监听(el-table中的事件)
buildadmin
A黄俊辉A10 个月前
buildAdmin 后端控制器的代码分析
windows·buildadmin
A黄俊辉A1 年前
buildadmin+tp8表格操作(7)表格的事件监听
buildadmin
A黄俊辉A1 年前
buildadmin+tp8表格操作(2)----表头上方按钮绑定事件处理,实现功能(全选/全不选)
buildadmin