若依框架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>
相关推荐
灵感__idea6 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_8 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈琦鹏8 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数9 小时前
掌握JavaScript函数封装与作用域
前端·javascript
Carlos_sam9 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴85010 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
你这个年龄怎么睡得着的11 小时前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite
Dream耀12 小时前
提升React移动端开发效率:Vant组件库
前端·javascript·前端框架
NUC_Dodamce13 小时前
Cocos3x 解决同时勾选 适配屏幕宽度和 适配屏幕高度导致Widget组件失效的问题
开发语言·javascript·ecmascript