总结一些vue3小知识4

总结一些vue3小知识1：总结一些vue3小知识1_vue3 el-form-CSDN博客

总结一些vue3小知识2：Vue3 实用技巧与最佳实践-CSDN博客

总结一些vue3小知识3：总结一些vue3小知识3_disabled-date-CSDN博客

总结一些vue3小知识4：总结一些vue3小知识4-CSDN博客

1.重置表单

<el-form inline ref="formRef" :model="searchParams" label-width="80">
  <el-form-item label="创建时间">
    <el-date-picker v-model="dateTime" type="daterange" range-separator="-" start-placeholder="开始日期"
      end-placeholder="结束日期" value-format="YYYY-MM-DD" format="YYYY-MM-DD" class="w200"/>
  </el-form-item>
  <el-form-item label="公司编码" prop="contractNo">
    <el-input v-model="searchParams.contractNo" placeholder="请输入合同编号" class="w200"/>
  </el-form-item>
  <el-form-item label="指令编号" prop="customerName">
    <el-input v-model="searchParams.customerName" placeholder="请输入客户名称" class="w200"/>
  </el-form-item>
<el-form-item label=" ">
    <el-button type="primary" @click="getList">搜索</el-button>
    <el-button @click="resetData">重置</el-button>
</el-form-item>
</el-form>

// 分页
let pageData = ref({
  total: 0,
  pageNum: 1,
  pageSize: 50,
});
const dateTime = ref([])
const formRef = ref(null)
const searchParams = ref({
  contractNo:"",
  customerName:[],
})

const resetData = () => {
  formRef.value.resetFields(); // 重置表单 方式1
  // Object.keys(searchParams.value).forEach((key) => {  // 重置表单 方式1
  //   if (Array.isArray(searchParams.value[key])) {
  //     searchParams.value[key] = [];
  //   } else {
  //     searchParams.value[key] = '';
  //   }
  // })
  pageData.value = {
    total: 10,
    pageNum: 1,
    pageSize: 50,
  }
  dateTime.value.length = 0;
  getList()
}

说明：ref="formRef" :model="searchParams" prop="contractNo"这三个必须要有；resetFields()是表单的重置方法