[BD] 自定义筛选条件, 并刷新表格数据

主要思路, 监听baTable.comSearch.form.id的变化, 变化时调用baTable.onTableAction进行刷新表格, 这里comSearchData应该用Push, 否则可能会覆盖掉原来的搜索条件

// 点击按钮刷新表格, 并添加筛选条件
const Test = () => {
 console.log("只筛选ID=1:", baTable.comSearch)
 baTable.comSearch.form.id = 1
}

// 监听baTable.comSearch.form.id的变化
watch(
   () => baTable.comSearch.form.id,
   (newVal) => {
       console.log("数据变化了:", newVal)
       let comSearchData = [{
         field:'id',
         operator: '=',
         render:null,
         val: newVal
       }]
       baTable.onTableAction('com-search', comSearchData)
   }
)

优化版, 解决筛选条件被覆盖的问题, 代码参考

web\src\components\table\comSearch\index.vue 145

// 点击按钮刷新表格, 并添加筛选条件
const Test = () => {
 console.log("只筛选ID=1:", baTable.comSearch)
 let status = Math.floor(Math.random() * (5 - 1)) + 1; // 随机状态
 baTable.comSearch.form.status = status
}

// 监听baTable.comSearch.form.id的变化
watch(
   () => baTable.comSearch.form.status,
   (newVal) => {
       console.log("数据变化了:", newVal)
       let comSearchData: comSearchData[] = []
       for (const key in baTable.comSearch.form) {
           if (!baTable.comSearch.fieldData.has(key)) {
               continue
           }

           let val = ''
           let fieldDataTemp = baTable.comSearch.fieldData.get(key)
           if (fieldDataTemp.render == 'datetime' && (fieldDataTemp.operator == 'RANGE' || fieldDataTemp.operator == 'NOT RANGE')) {
               // 时间范围组件返回的是时间数组
               if (baTable.comSearch.form[key] && baTable.comSearch.form[key].length >= 2) {
                   // 数组转字符串，以实现通过url参数传递预设搜索值
                   if (fieldDataTemp.comSearchRender == 'date') {
                       val = baTable.comSearch.form[key][0] + ' 00:00:00' + ',' + baTable.comSearch.form[key][1] + ' 23:59:59'
                   } else {
                       val = baTable.comSearch.form[key][0] + ',' + baTable.comSearch.form[key][1]
                   }
               }
           } else if (fieldDataTemp.operator == 'RANGE' || fieldDataTemp.operator == 'NOT RANGE') {
               // 普通的范围筛选，baTable在初始化时已准备好start和end字段
               if (!baTable.comSearch.form[key + '-start'] && !baTable.comSearch.form[key + '-end']) {
                   continue
               }
               val = baTable.comSearch.form[key + '-start'] + ',' + baTable.comSearch.form[key + '-end']
           } else if (baTable.comSearch.form[key]) {
               val = baTable.comSearch.form[key]
           }

           if (val) {
               comSearchData.push({
                   field: key,
                   val: val,
                   operator: fieldDataTemp.operator,
                   render: fieldDataTemp.render,
               })
           }
       }
       baTable.onTableAction('com-search', comSearchData)
   }
)

最后将字段修改为用户ID即可

// 模板中
  <el-tree
     ref="treeRef"
     class="filter-tree"
     :data="data"
     :props="defaultProps"
     default-expand-all
     :filter-node-method="filterNode"
     @node-click="NodeClick"
 />

// 树形用户被点击  
const NodeClick = (data) => {
 console.log("@@@@@", data.id)
 baTable.comSearch.form.uid = data.id
}

// 表格中, 需要加入筛选
{ label: "用户ID", prop: 'uid', align: 'center', operator: '='},


// 监听代码处
watch(
   () => baTable.comSearch.form.uid,
   ...
)