一、调用页面
//路由
import { useRouter } from 'vue-router
let $router = useRouter()
// 车组调整页面
const handleCar=(row:any) =>{
$router.push({path:"/test/edit",query:{setCode:row.setCode,lineName:row.lineName}})
}
二、新打开的页面
import useTagsViewStore from '@/store/modules/tagsView'
//路由
import { useRouter, useRoute } from 'vue-router'
let $router = useRouter()
let route = useRoute()
// 参数定义
const state = reactive({
setId:'',
setCode:'',
rosteringDate:'',
lineName:'',
plateNumber:'',
property:'',
isLoading:false,
showVehicle:false,
showPerson:false,
show:false,
selectShow:false,
adjustTableData:[],
tempIndex:0,
oriTableData:[]
})
const {
setId,
setCode,
rosteringDate,
lineName,
plateNumber,
property,
showVehicle,
isLoading,
showPerson,
show,
selectShow,
adjustTableData,
tempIndex,
oriTableData
} = toRefs(state)
// DOM挂载完成调用
onMounted (() =>{
// 接收父组件传过来的值
state.lineName = route.query.lineName
state.plateNumber = route.query.plateNumber
state.setCode = route.query.setCode
state.rosteringDate = route.query.rosteringDate
state.setId = route.query.setId
handleSearch(state.setId,state.rosteringDate)
})
// 返回
const tagsView = useTagsViewStore()
const handleBack = () => {
tagsView.delCurrentView()
$router.go(-1)
}
三、下拉框中的值选中之后渲染不及时
<el-table-column prop="dueTime" label="时间段" >
<template #default="scope">
<el-select v-model="scope.row.time" :key="updateKey" placeholder="请选择" @change="value => {changeTime(value, scope.row);}" :disabled="selectShow" >
<el-option
v-for="item in timeList"
:key="item.key"
:label="item.value"
:value="item.key">
</el-option>
</el-select>
</template>
</el-table-column>
const updateKey=ref(0)
// 选择替班时间
const changeTime=(data:any,row:any) =>{
let timeArr = data.split("-");
if (timeArr.length > 1){
row.startTime = timeArr[0]
row.endTime = timeArr[1]
row.dueTime =timeArr;
row.time = data;
updateKey.value++
}
}
四、新增校验
import type { FormInstance, FormRules } from 'element-plus' const rules = ref<FormRules>({ customerId: [ { required: true, message: '请选择', trigger: [ 'blur', 'change' ] } ], lineId: [ { required: true, message: '请选择', trigger: [ 'blur', 'change' ] } ], taskType: [ { required: true, message: '请选择', trigger: [ 'blur', 'change' ] } ], scheduleType: [ { required: true, message: '请选择', trigger: [ 'blur', 'change' ] } ], remark: [ { trigger: [ 'blur', 'change' ] }, { max: 256, message: '最多输入256个字符！' } ], });五、确定方法
const submitForm = async (formEl: FormInstance | undefined) => { if (!formEl) return await formEl.validate((valid) => { if (valid) { if(state.tableData.moringBranchs.length == 0 && state.tableData.nightBranchs.length == 0 && state.tableData.turnInBranchs.length == 0 && state.tableData.ATMBranchs.length == 0) { return } // 保存相关数据 let params={ earlyBranch:state.tableData.moringBranchs, lateBranch:state.tableData.nightBranchs, doorstep:state.tableData.turnInBranchs, selfDevices:state.tableData.ATMBranchs, lineId:state.lineId, rosteringDate:state.rosteringDate, setCode:state.setCode, scheduleType:editForm.value.scheduleType, customerId:editForm.value.customerId, remark:editForm.value.remark } batchTaskUpdate(params).then((res) =>{ ElMessage({message:'成功！',type:'success'}) tagsView.delCurrentView() $router.go(-1) }) } }) } 标签：setCode,const,vue3,state,按钮,router,页面,tableData,row From： https://www.cnblogs.com/flyShare/p/17807168.html