avue的column列添加搜索的默认值

需求

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

 实现

1.在avue框架添加:search="query"

2.在data中给query设置默认值

3.在searchReset()方法中设置默认的查询条件

代码(我要设置的默认值是isArchived_eq这个属性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>

方法还有很多,这是其中一种,开始用得很笨的方法

  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值