若依框架vue3代码段

一、不同意的时候必须添加备注

<el-form> 
<el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
        </el-form-item>
      </el-form>

<template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitSave (true)">同意</el-button>
          <el-button @click="submitSave (false)">不同意</el-button>
        </div>
 </template>



const rules = ref({
  remark: [{required: false, trigger: "blur", message: "请输入备注"}],
})

const submitSave = (bool) => {
  rules .value.remark = [{required: !bool, trigger: "blur", message: "请输入备注"}];
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
        update({            
            id: form.value.id,
            remark: form.value.remark            
          }).then(response => {            
            form.value = false;
            getList();
            proxy.$modal.msgSuccess("操作成功");
          });
    
      }
  });

二、tab切换

 <el-button icon="add" link @click="view(scope.row,false)">新增</el-button>
 <el-button link icon="View" type="primary" @click="view(scope.row,true)">查看</el-button> 

<el-form ref="formRef" :model="form" :rules="rules" v-loading="loading"
               label-suffix=":" :disabled="isShow">
        <el-tabs
            v-model="tabActive"
            type="card"
            class="demo-tabs"
        >
          <el-tab-pane data-val="1" label="基本信息1" name="1">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name"
                        placeholder="请输入名称"/>
            </el-form-item>           
          </el-tab-pane>
          <el-tab-pane data-val="2" label="基本信息2" name="2">
            <el-form-item label="名称" prop="ssName">
              <el-input v-model="form.ssName" placeholder="请输入名称"/>
            </el-form-item>           
          </el-tab-pane>
          <el-tab-pane data-val="3" label="基本信息3" name="3">            
            <el-form-item label="地址" prop="addreass">
              <el-input v-model="form.addreass" type="textarea" placeholder="请输入通讯地址"/>
            </el-form-item>            
          </el-tab-pane>
        </el-tabs>
      </el-form>


查看默认第一个：
const tabActive = ref('1')
const view = (row, isShow) => {
  tabActive.value = '1';
}

保存的时候默认切换下一个tab:
const submit = () => {
  proxy.$refs["formRef"].validate(valid => {
    if (valid) {
      const baseInfo1 = {
        name: form.value?.name       
      }
      const baseInfo2 = {
        ssName: form.value?.ssName
      }
      const baseInfo3 = {
        addreass: form.value?.addreass
      }
      loading.value = true;
      
      saveMethod({
            id: form.value.id,
            baseInfo1 : JSON.stringify(baseInfo1 ),
            baseInfo2 : JSON.stringify(baseInfo2 ),
            baseInfo3 : JSON.stringify(baseInfo3 ),           
            createTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),           
            updateTime: new Date()
          }).then(response => {
            loading.value = false;
            isOpen.value = false;
            getList();
            proxy.$modal.msgSuccess("成功");
          });

    } else {
      const fields = proxy.$refs["formRef"].fields
      for (let i = 0; i < fields.length; i++) {
        if (fields[i].validateState === 'error') {
          tabActive.value = fields[i].$el.parentElement.getAttribute('data-val')
          break;
        }
      }
    }
  });
}

三、竖向时间轴

<el-timeline>
            <el-timeline-item color="#0bbd87"
                              v-for="(record, index) in list"
                              :key="index" :timestamp="moment(record.createTime).format('YYYY-MM-DD HH:mm:ss')">
              <div style="font-weight: bolder;">姓名:&nbsp;{{ record.name}}</div>
              <div style="margin-top: 8px;">备注:&nbsp;{{ record.remark}}</div>
            </el-timeline-item>
          </el-timeline>

四、规则验证

const rules = {
  startTime: [
    {required: true, trigger: "change", message: "请选择开始时间"},
    {
      validator: (rule, value, callback) => {
        const startDate = new Date(form.value.startTime);
        const endDate = new Date(value);
        if (startDate.getTime() - 8.64e7 > endDate.getTime()) {
          callback(new Error("结束日期不能小于开始日期"));
        } else {
          callback();
        }
      },
      trigger: "change",
    }
  ],  
number: [
    {required: true, trigger: "blur", message: "请输入"},
    {
      validator: (rule, value, callback) => {
        if (!Number.isInteger(Number(value))) {
          callback(new Error('请输入整数值'));
        } else if (value < 0 || value > 1000000) {
          callback(new Error('数值必须在0到1000000之间'));
        } else {
          callback();
        }
      }, trigger: 'blur'
    }
  ],
  remark: [
    {required: true, trigger: "change", message: "请输入备注"},
    {min:1,max: 1000, trigger: "blur", message: "最大长度1000"}
  ]  
}

五、多个tab嵌入页面

<el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
  >
    <el-tab-pane label="基本信息1" name="1">
        <ArchivesBase1  v-if="activeName === '1'"/>
    </el-tab-pane>
    <el-tab-pane label="基本信息2" name="2">
       <ArchivesBase1  v-if="activeName === '2'"/>
    </el-tab-pane>
    <el-tab-pane label="基本信息3" name="3">
      <ArchivesBase1  v-if="activeName === '3'"/>
    </el-tab-pane>   

  </el-tabs>


import {ref} from 'vue'
import {useRoute} from 'vue-router'
import ArchivesBase1  from '@/views/test/archivesBase1/index.vue'
const route = useRoute()
const activeName = ref('1')
const handleClick = (tab, event) => {
}

onMounted(() => {
  activeName.value = route.query.action || '1' 
})

六，select列表不回显

字段是int

:value="parseInt(dict.value)"

<el-form-item label="诊断服务商" prop="serviceDeptId">
  <el-select v-model="form.serviceDeptId" placeholder="请选择诊断服务商">
    <el-option
        v-for="dict in diagnosis_evaluate_dept"
        :key="dict.value"
        :label="dict.label"
        :value="parseInt(dict.value)"
    ></el-option>
  </el-select>
</el-form-item>

七，table中拼接两个字段值

八 、格式化字典

  typeOptions: [
        { value: 1, label: "单选" },
        { value: 2, label: "多选" },
      ],

<el-table-column label="类型" align="center" prop="type" >
        <template #default="scope">
          <span>{{formatterDict(typeOptions,scope.row.type)}}</span>
        </template>
      </el-table-column>tt

  formatterDict(listOption_,value_){
      let obj = listOption_.find(item=>{
        return item.value == value_;
      })
      if(obj !=undefined || obj!=null){
        return obj.label;
      }
    },