灵感来源
表头的餐数是动态设置的，主要用到了this.option.colum配置表头
this.option.column[2].children = childrenR;
this.option.column[3].children = childrenS;
问题：搜索后不回显
解决办法
change方法设置搜索的默认值
{
label: "所属机构",
prop: "organizationId",
type: "tree",
search: false,
hide: true,
dicUrl: "/api/cm/organization/tree",
props: {
label: "title",
value: "key",
},
change: ({ value }) => {
this.option.column[1].searchValue = value;
},
},
<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.name">
<span class="num-name">{{ e.name }}</span>
<div class="line"></div>
<div class="num-info">
{{ e.real }}<span>（实际）</span> / {{ e.standard
}}<span>（标准）</span>
</div>
</div>
</div>
</template>
<template slot="searchMenu">
<el-button size="small">导出</el-button>
</template>
</avue-crud>
</basic-container>
</template>
<script>
import {
eatTimeStatisticsPage,
eatTimeStatisticsOrgPage,
getTimeTotal,
} from "@/api/statistics/index";
import { getCanList } from "@/api/person/person";
export default {
data() {
return {
type: 1,
form: {},
query: {},
loading: true,
canList: [], //就餐列表
totalList: [], //总计
canLength: 0,//餐长度
page: {
pageSize: 10,
currentPage: 1,
total: 0,
},
selectionList: [],
option: {
height: "400",
calcHeight: 30,
tip: false,
searchShow: true,
searchMenuSpan: 8,
border: true,
align: "center",
index: false,
selection: false,
refreshBtn: false,
searchShowBtn: false,
columnBtn: false,
addBtn: false,
editBtn: false,
delBtn: false,
viewBtn: false,
dialogClickModal: false,
menuWidth: 80,
column: [
{
label: "日期",
prop: "eatDate",
type: "date",
format: "yyyy-MM-dd",
valueFormat: "yyyy-MM-dd",
},
{
label: "所属机构",
prop: "organizationId",
type: "tree",
search: false,
hide: true,
dicUrl: "/api/cm/organization/tree",
props: {
label: "title",
value: "key",
},
},
{
label: "实际（人）",
children: [],
},
{
label: "标准（人）",
children: [],
},
{
label: "",
searchLabelWidth: "1",
prop: "date",
type: "date",
searchSpan: 9,
searchRange: true,
valueFormat: "yyyy-MM-dd",
search: true,
hide: true,
change: ({ value }) => {
this.option.column[4].searchValue = value;
},
},
],
},
data: [],
search: {},
};
},
created() {
this.geteatTime();
},
methods: {
// 总计
getTimeTotal() {
getTimeTotal(
this.query.startTime,
this.query.endTime,
this.query.organizationId
).then((res) => {
let list = [];
let data = res.data.data;
for (let i = 1; i < this.canLength + 1; i++) {
let tempO = {};
tempO.name = this.canList[i - 1].name;
tempO.real = data.realTotal[i];
tempO.standard = data.standardTotal[i];
list.push(tempO);
}
this.totalList = list;
});
},
geteatTime() {
getCanList().then((re) => {
this.canList = re.data.data;
});
},
changeTab(type) {
this.type = type;
this.query = {};
this.page.currentPage = 1;
if (type == 2) {
this.option.column[1].hide = false;
this.option.column[1].search = true;
} else {
this.option.column[1].hide = true;
this.option.column[1].search = false;
}
this.onLoad(this.page);
},
beforeOpen(done, type) {
if (["edit", "view"].includes(type)) {
getDetail(this.form.id).then((res) => {
this.form = res.data.data;
});
}
done();
},
searchReset() {
this.query = {};
this.onLoad(this.page);
},
searchChange(params, done) {
this.query = params;
this.query.startTime = this.query.date[0];
this.query.endTime = this.query.date[1];
delete this.query.date;
this.page.currentPage = 1;
this.getTimeTotal();
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);
},
changeData(data) {
this.page.total = data.total;
let tempData = [];
let childrenR = [];
let childrenS = [];
data.records.forEach((e) => {
let tempO = {};
let realArr = e.realCount.split(",");
if (this.canLength < realArr.length) {
this.canLength = realArr.length;
}
realArr.forEach((el, ind) => {
tempO["real" + ind] = el;
});
let standardArr = e.standardCount.split(",");
standardArr.forEach((el, ind) => {
tempO["standard" + ind] = el;
});
tempO.eatDate = e.eatDate;
if (this.type == 2) {
tempO.organizationId = e.organizationId;
}
tempData.push(tempO);
});
for (let i = 0; i < this.canLength; i++) {
let childR = { label: this.canList[i].name, prop: "real" + i };
let childS = { label: this.canList[i].name, prop: "standard" + i };
childrenR.push(childR);
childrenS.push(childS);
}
this.option.column[2].children = childrenR;
this.option.column[3].children = childrenS;
this.getTimeTotal();
this.data = tempData;
},
onLoad(page, params = {}) {
this.loading = true;
if (this.type == 1) {
eatTimeStatisticsPage(
page.currentPage,
page.pageSize,
Object.assign(params, this.query)
).then((res) => {
const data = res.data.data;
this.changeData(data);
this.loading = false;
});
} else {
eatTimeStatisticsOrgPage(
page.currentPage,
page.pageSize,
Object.assign(params, this.query)
).then((res) => {
const data = res.data.data;
this.changeData(data);
this.loading = false;
});
}
this.loading = false;
},
},
};
</script>
<style 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 {
display: flex;
height: 40px;
line-height: 40px;
font-size: 14px;
margin: 20px 0;
width: 100%;
.item {
flex: 1;
background: linear-gradient(-90deg, #2597c8, #4ccc8e);
border-radius: 10px;
color: #fff;
font-size: 1em;
font-weight: 400;
margin-right: 2%;
width: 100%;
.num-name {
display: inline-block;
width: calc(30% - 1px);
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: 70%;
text-align: center;
float: left;
span {
font-size: 0.7em;
}
}
}
.item:last-child {
margin: 0;
}
.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);
}
}
.line {
height: 8px;
width: 100%;
background: #ddd;
}
.box-card {
margin-bottom: 20px;
}
</style>
![怎样使用SpringMVC控制页面[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)