若依框架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>
相关推荐
清幽竹客1 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
知性的小mahua1 小时前
echarts+vue实现中国地图板块渲染+省市区跳转渲染
vue.js
weiweiweb8881 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
前端fighter9 天前
Vuex 与 Pinia:全面解析现代 Vue 状态管理的进化之路
前端·vue.js·面试
嘉琪0019 天前
2025——js 面试题
开发语言·javascript·ecmascript
snow@li9 天前
vue3-ts-qrcode :安装及使用记录 / 配置项 / 效果展示
前端·javascript·vue.js