vue3-----单个赋值解决对象直接赋值导致对象响应式失效(里面的属性值会改变不了) + 路由传参
接收路由跳转传过来的参数
//接收路由跳转传过来的参数
const route = useRoute()
const searchForm = reactive({
dateTime: route.query.dateTime
})Object.assign解决不了（因为Object.assign外层是深拷贝，内层是浅拷贝），只能单个赋值（用变量捯一遍），对象直接赋值导致对象响应式失效(里面的属性值会改变不了)================本篇重点===============
// params = ...searchForm 重新赋值后会，params会变成普通对象,失去响应式的效果,需要单个赋值或者使用 Object.assign
// const params = {...searchForm, gsType: route.query.gsType,ydGs: route.query.ydGs,deptId: deptId.value}
//上面这种直接赋值就会出错，加reactive也没用，试过了，别犟
const params = Object.assign({},{
...searchForm, gsType: route.query.gsType,ydGs: route.query.ydGs,deptId: deptId.value
})
const getStatisticsInfo = () =>{
isIndex.value = false;
statisticsInfo(params).then( res =>{
let data = res.data.data.list
districTElecTableData.value = data;
}).catch( error =>{
console.log( 'error',error )
})
}
//上面那个拷贝没用，响应式还是没有，老老实实写在参数括号里面
// 列表
const getDistricTElecList = () => {
isIndex.value = true;
//老老实实写在参数括号里面
statisticsGq({...searchForm, gsType: route.query.gsType,ydGs: route.query.ydGs}).then( res =>{
let data = res.data.data
districTElecTableData.value = data;
}).catch( error =>{
console.log( 'error',error )
})
};
//再捯一遍，不直接赋值也能保留对象的响应式
//搞个变量接收路由跳转携带的参，然后把变量赋值给响应式对象的属性
let IdeptId = route.query.deptId
let IydGs = route.query.ydGs
let IgsType = route.query.gsType
const searchForm = reactive({
deptId: IdeptId,
ydGs:IydGs,
gsType:IgsType,
beginTime: begin,
endTime: end
})
// 表格数据
let districTElecTableData = ref([]);
// 列表
const getDistricTElecList = () => {
const param = { ...searchForm, page: dataList.page, limit: dataList.limit }
getElectroList(param).then( res => {
if(res.data.code == 200){
dataList.tableData = [];
let data = res.data.data;
dataList.tableData = data.list;
dataList.total = data.totalCount;
}
}).catch( error =>{
console.log( 'error',error )
})
};只能单个赋值（用变量捯一遍）============================本篇重点的正确解决方法================================
<!-- 这是页面结构，需要一个响应式对象的各个属性来绑定表单里各个组件，从而获取前端，用户选择的值 -->
<el-form :inline="true">
<el-form-item label="管理区">
<el-select v-model="searchForm.deptId" placeholder="请选择管理区名称" label-width="100px" >
<el-option v-for="item in optionsGQ" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="用电归属">
<el-select v-model="searchForm.ydGs" placeholder="请选择用电归属" label-width="100px" @change = 'handleChangeYDGS'>
<el-option v-for="item in optionsGS" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="用电类型">
<el-select v-model="searchForm.gsType" placeholder="请选择用电类型" label-width="100px" >
<el-option v-for="item in optionsYDLX" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item label="日期">
<el-date-picker v-model="searchForm.beginTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择开始日期"
style="width:150px;"/>
<span> - </span>
<el-date-picker v-model="searchForm.endTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择结束日期"
style="width:150px;" />
</el-form-item>
<el-form-item label="用电单位" >
<el-input v-model="searchForm.deptName" placeholder="请输入用电单位名称" label-width="100px" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getDistricTElecList">查询</el-button>
<el-button @click="onReset">重置</el-button>
<el-button type="primary" @click="backToPage">返回</el-button>
<el-button type="primary" icon="Download" @click="exportElecDetail">导出</el-button>
</el-form-item>
</el-form>对象的各个属性，单个赋初值（用变量捯一遍），才能保住对象searchForm的响应式
let IdeptId = route.query.deptId
// 用电归属
let IydGs = route.query.ydGs
let IdeptName = route.query.deptName ? route.query.deptName : ''
// 用电类型
let IgsType = route.query.gsType
const searchForm = reactive({
deptId: IdeptId,
ydGs: IydGs,
gsType: IgsType,
beginTime: begin,
endTime: end,
deptName: IdeptName
})这样就可以创建一个对象params来组合所需的属性，同时还能保持searchForm的响应式
// 表格数据
let districTElecTableData = ref([]);
// 列表
const getDistricTElecList = () => {
//这样就可以创建一个对象params来组合所需的属性，同时还能保持searchForm的响应式
const param = { ...searchForm, page: dataList.page, limit: dataList.limit }
getElectroList(param).then( res => {
if(res.data.code == 200){
dataList.tableData = [];
let data = res.data.data;
dataList.tableData = data.list;
dataList.total = data.totalCount;
}
}).catch( error =>{
console.log( 'error',error )
})
};携带参数跳转
import { useRoute, useRouter } from 'vue-router' // useRoute跳回去，接参的;
//携带参数跳转
const handleRowClick = (row) => {
if(row.treeNum == 1){
router.push({
path:'/DistricTElec/index2',
query:{
gsType: row.gsType,
ydGs: row.ydGs,
dateTime : searchForm.dateTime
}
})
}
}