2022-10-20 avue的column列添加搜索的默认

在type为select选择框的column列一进入此页面时，设置一个默认值，在点击清空 按钮时，默认查询默认条件的值，类似于如下这种

<template>
  <basic-container>
    <avue-crud ref="crud"
               :data="data"
               :page="page"
               :option="option"
               :search="query"     //设置查询，不要使用:syncSearch，否则会报错
               @search-change="searchChange"
               @search-reset="searchReset"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="onRefresh"
               @on-load="onLoad">
    </avue-crud>
  </basic-container>
</template>
 
<script>
import {DICT, tree_stuff} from "@/util/mixins";
import {list, update} from "@/api/report/project";
 
export default {
  data() {
    return {
      query: {isArchived_eq: 0},    //设置查询的默认值
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: {
        tip: false,
        border: true,
        index: true,
        selection: false,
        addBtn: false,
        menu: false,
        searchMenuSpan: 4,
        column: [
          {label: "项目状态", prop: "isArchived_eq", type: "select", dicData: DICT.archivedType, search: true, searchSpan: 4, searchPlaceholder: "是否归档", showColumn: false, hide: true},
          {label: "需求来源", prop: "requireBu_like", type: "select", dicData: DICT.requiredBUType, search: true, searchSpan: 4, searchPlaceholder: "需求来源", filterable: true, showColumn: false, hide: true},
          {label: "费用列支", prop: "chargeType_eq", type: "select", dicData: DICT.chargeType, cell: true, search: true, searchSpan: 4, placeholder: "费用列支", showColumn: false, hide: true},
 
          {label: "项目名称", prop: "projectName", minWidth: 260},
          {
            label: "费用列支", prop: "chargeType", type: "select", dicData: DICT.chargeType, cell: true, width: 110, placeholder: "请选择",
            change: ({row, value}) => {
              if (!value) return;
              this.rowUpdate(row);
            }
          },
          {
            label: "项目负责人", prop: "personId", type: "select", dicData: tree_stuff, filterable: true, cell: true, width: 110, placeholder: "可输入",
            change: ({row, value}) => {
              if (!value) return;
              this.rowUpdate(row);
            }
          },
          {label: "需求申请所属事业部", prop: "requireBU", width: 220, overHidden: true},
          {label: "需求总数", prop: "requireNum", width: 90},
          {label: "产品设计", prop: "productNum", width: 90},
          {label: "任务统计", prop: "task", width: 100, slot: true},
          {label: "七日新增", prop: "addNum", width: 90},
          {label: "七日完成", prop: "doneNum", width: 90},
          {label: "投入资源", prop: "resNum", width: 100, slot: true},
          {label: "发生费用", prop: "usedAmount", width: 120},
          {label: "预算总计", prop: "reckonAmount", width: 120},
          {label: "预估剩余预算", prop: "residueDays", width: 120, slot: true}
        ],
      },
      data: []
    };
  },
  methods: {
    rowUpdate(row) {
      update(row);
      row.$cellEdit = false;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.currentPage = 1;
      this.page.pageSize = pageSize;
    },
    searchReset() {
      this.query = {isArchived_eq: 0};  //清空搜索条件时再查询，直接设置查询得默认值
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    onRefresh() {
      this.onLoad(this.page);   
    },
    onLoad(page, params = {}) {
      list(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data;
        this.page.total = data.total;
        this.data = data.records;
        this.data.forEach(item => {
          item.residueAmount = item.reckonAmount - item.usedAmount;
          item.residueDays = item.residueAmount / item.daysAmount;
          if (item.chargeType === -1) item.chargeType = null;
        });
      });
    }
  }
};
</script>
 
<style>
</style>