searchValue回显不好使 avue

带搜索条件显示列表，搜索条件不回显
解决办法：
对column进行deepClone深克隆，赋值后再赋回去

let constData = this.deepClone(this.option.column);
// 设置筛选回显
 constData[1].searchValue = row.organizationId;
 constData[2].searchValue = this.date;
 constData[3].searchValue = row.standardId;
 this.option.column = constData;

完整代码

<template>
  <basic-container>
    <div class="tabs">
      <label :class="{ active: type == 1 }" @click="changeTab(1)">各团队</label>
      <label :class="{ active: type == 2 }" @click="changeTab(2)">个人</label>
    </div>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :before-open="beforeOpen"
      v-model="form"
      ref="crud"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
      :search.sync="search"
    >
      <template slot="header">
        <div class="totle-num">
          <div class="item" v-for="e in totalList" :key="e.standardName">
            <span class="num-name">{{ e.standardName }}</span>
            <div class="num-info">
              {{ e.realDayTotal }}天 {{ e.realTotal }}餐<span>(实际)</span>/{{
                e.standardDayTotal
              }}天 {{ e.standardTotal }}餐<span>(标准)</span>
            </div>
          </div>
        </div>
      </template>
      <template slot="searchMenu">
        <el-button size="small" @click="handleExport">导出</el-button>
      </template>
      <template slot-scope="{ row, type, size }" slot="menu">
        <el-button :size="size" :type="type" @click="goDetail(row)"
          >详情</el-button
        >
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import {
  getEatOrgTotalPage,
  eatPersonTotalPage,
  getPersonTotal,
} from "@/api/statistics/index";
import { getCanList } from "@/api/person/person";
import website from "@/config/website";
import { getToken } from "@/util/auth";
export default {
  data() {
    return {
      date: "",
      type: 1,
      form: {},
      query: {},
      loading: true,
      canList: [],
      totalList: [],
      canCount: 0,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      selectionList: [],
      option: {
        height: "400",
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 7,
        searchMenuPosition: "left",
        border: true,
        align: "center",
        index: false,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        selection: false,
        refreshBtn: false,
        searchShowBtn: false,
        columnBtn: false,
        dialogClickModal: false,
        labelPosition: "left",
        column: [
          {
            label: "姓名",
            prop: "personName",
            hide: true,
          },
          {
            label: "所属机构",
            prop: "organizationId",
            searchTags: true,
            type: "tree",
            search: true,
            dataType: "string",
            searchMultiple: true,
            dicUrl: "/api/cm/organization/tree",
            props: {
              label: "title",
              value: "key",
            },
            change: ({ value }) => {
              this.option.column[1].searchValue = value;
            },
          },
          {
            label: "日期期间",
            prop: "date",
            type: "date",
            searchRange: true,
            valueFormat: "yyyy-MM-dd",
            search: true,
            change: ({ value }) => {
              this.option.column[2].searchValue = value;
            },
          },
          {
            label: "餐品标准",
            prop: "standardId",
            type: "select",
            search: true,
            dicUrl: "/api/cm/standard/select",
            props: {
              label: "standardName",
              value: "id",
            },
            change: ({ value }) => {
              this.option.column[3].searchValue = value;
            },
          },
          {
            label: "",
            searchLabelWidth: 1,
            searchPlaceholder: "搜索内容",
            prop: "keyword",
            hide: true,
            search: true,
          },
          {
            label: "实际",
            children: [
              {
                label: "就餐天数",
                prop: "realDayCount",
              },
              {
                label: "就餐单餐数",
                prop: "realCount",
              },
            ],
          },
          {
            label: "标准",
            children: [
              {
                label: "标准就餐（天）",
                prop: "standardDayCount",
              },
              {
                label: "标准单餐（餐）",
                prop: "standardCount",
              },
            ],
          },
        ],
      },
      data: [],
      search: {},
    };
  },
  created() {
    this.geteatTime();
    this.getPersonTotal();
    this.monthdays();
  },
  methods: {
    goDetail(row) {
      let constData = this.deepClone(this.option.column);
      if (this.type == 1) {
        this.option.column[0].hide = false;
        this.page.currentPage = 1;
        this.query.organizationId = row.organizationId;
        this.query.standardId = row.standardId;
        this.query.startTime = this.date[0];
        this.query.endTime = this.date[1];
        // 设置筛选回显
        constData[1].searchValue = row.organizationId;
        constData[2].searchValue = this.date;
        constData[3].searchValue = row.standardId;
        this.option.column = constData;

        this.type = 2;
        this.getPersonTotal();
        this.onLoad(this.page);
      } else {
        if (row) {
          this.$router.push({
            path: "personal",
            query: {
              eatDate: this.date,
              organizationId: row.organizationId,
              standardId: row.standardId,
              personName: row.personName,
            },
          });
        }
      }
    },
    // 当前一个月的时间
    monthdays() {
      let month1 = this.showMonthFirstDay();
      let month2 = this.showMonthLastDay();
      let date = [month1, month2];
      this.date = date;
      this.option.column[2].searchValue = date;
    },
    showMonthFirstDay() {
      let Nowdate = new Date();
      let MonthFirstDay = new Date(
        Nowdate.getFullYear(),
        Nowdate.getMonth(),
        1
      );
      let M = Number(MonthFirstDay.getMonth()) + 1;
      return (
        MonthFirstDay.getFullYear() + "-" + M + "-" + MonthFirstDay.getDate()
      );
    },
    showMonthLastDay() {
      let Nowdate = new Date();
      let MonthNextFirstDay = new Date(
        Nowdate.getFullYear(),
        Nowdate.getMonth() + 1,
        1
      );
      let MonthLastDay = new Date(MonthNextFirstDay - 86400000);
      let M = Number(MonthLastDay.getMonth()) + 1;
      return (
        MonthLastDay.getFullYear() + "-" + M + "-" + MonthLastDay.getDate()
      );
    },
    changeTab(type) {
      this.type = type;
      this.query = {};
      this.page.currentPage = 1;
      if (type == 2) {
        this.option.column[0].hide = false;
      } else {
        this.option.column[0].hide = true;
      }
      this.getPersonTotal();
      this.onLoad(this.page);
    },
    // 导出
    handleExport() {
      let url = "";
      if (this.type == 1) {
        url += `/api/cm/statisticsreport/eatOrgTotalReport?${
          this.website.tokenHeader
        }=${getToken()}`;
      } else {
        url += `/api/cm/statisticsreport/eatPersonTotalReport?${
          this.website.tokenHeader
        }=${getToken()}`;
      }
      if (this.query.startTime != undefined) {
        url +=
          "&startTime=" +
          this.query.startTime +
          "&endTime=" +
          this.query.endTime;
      }
      if (this.query.organizationIds) {
        url += "&organizationIds=" + this.query.organizationIds;
      }
      if (this.query.standardId) {
        url += "&standardId=" + this.query.standardId;
      }
      if (this.query.keyword) {
        url += "&keyword=" + this.query.keyword;
      }
      this.$confirm("是否导出数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        window.open(url);
      });
    },
    // 总计
    getPersonTotal() {
      getPersonTotal(
        this.query.startTime,
        this.query.endTime,
        this.query.keyword,
        this.query.organizationIds,
        this.query.standardId
      ).then((res) => {
        this.totalList = res.data.data;
      });
    },
    geteatTime() {
      getCanList().then((re) => {
        this.canList = re.data.data;
      });
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      if (this.query.date) {
        this.query.startTime = this.query.date[0];
        this.query.endTime = this.query.date[1];
        this.date = this.query.date;
      }
      if (params.organizationId) {
        this.query.organizationIds = params.organizationId;
        delete this.query.organizationId;
      }
      this.getPersonTotal();
      this.onLoad(this.page, params);
      done();
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      if (this.query.date) {
        let date = this.query.date;
        this.query.startTime = date[0];
        this.query.endTime = date[1];
        delete this.query.date;
      }
      if (this.type == 1) {
        getEatOrgTotalPage(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          data.records.forEach((e) => {
            e.date = this.date[0] + " 至 " + this.date[1];
          });
          this.data = data.records;
          this.loading = false;
        });
      } else {
        eatPersonTotalPage(
          page.currentPage,
          page.pageSize,
          Object.assign(params, this.query)
        ).then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          data.records.forEach((e) => {
            e.date = this.date[0] + "至" + this.date[1];
          });
          this.data = data.records;
          this.loading = false;
        });
      }
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  label {
    display: inline-block;
    margin: 0 10px 20px 10px;
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
}
.active {
  border-bottom: 3px solid #40aaff;
  color: #40aaff;
}
/deep/.avue-crud__menu {
  min-height: 0;
}
.totle-num {
  line-height: 40px;
  font-size: 18px;
  margin: 20px 0;
  width: 100%;
  .item {
    background: linear-gradient(-90deg, #2597c8, #4ccc8e);
    border-radius: 10px;
    color: #fff;
    font-size: 1em;
    font-weight: 400;
    margin-right: 1.5%;
    width: 32.3%;
    display: inline-block;
    .num-name {
      display: inline-block;
      width: 22%;
      text-align: center;
      float: left;
    }
    .line {
      display: inline-block;
      width: 1px;
      height: 14px;
      background: #e7e7e7;
      opacity: 0.3;
      border-radius: 1px;
    }
    .num-info {
      display: inline-block;
      width: 78%;
      text-align: center;
      float: left;
      span {
        font-size: 0.7em;
      }
    }
  }
 .item:nth-child(3n) {
    margin: 0;
  }
  .item:nth-child(n + 4) {
    margin-top: 8px;
  }
  .item:nth-child(1) {
    background: linear-gradient(-90deg, #2597c8, #4ccc8e);
  }
  .item:nth-child(2) {
    background: linear-gradient(-90deg, #5f65ff, #1cb8ff);
  }
  .item:nth-child(3) {
    background: linear-gradient(-90deg, #ff8262, #f2ca7d);
  }
  .item:nth-child(4) {
    background: linear-gradient(-90deg, #fb4458, #ed4578);
  }
  .item:nth-child(5) {
    background: linear-gradient(-90deg, #5b86e5, #36d1dc);
  }
  .item:nth-child(6) {
    background: linear-gradient(-90deg, #b402e7, #ed11c1);
  }
}
.box-card {
  margin-bottom: 20px;
}
.avue-form,
/deep/ .avue-form__group .el-col:first-child {
  padding-left: 0 !important;
}
</style>