正则表达式-将div#demo.demo转化成<div id="demo" class="demo"></div>

最新推荐文章于 2022-01-08 16:24:59 发布
原创 最新推荐文章于 2022-01-08 16:24:59 发布 · 449 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#正则表达式

本文介绍了一个使用JavaScript实现的CSS选择器转换示例。通过正则表达式匹配并替换CSS选择器，将特定的选择器格式转换为HTML标签格式。 
function testReg4 () {
            var str = "div#demo.demo" ;
            var one = str.replace(/\b(\w+)\b\#\b(\w+)\b\.\b(\w+)\b/,function(match,$1,$2,$3){
            return "<"+$1+" id=\"" + $2+ "\" class=\""+ $3+ "\"><\/" + $1 +">"
        });
            alert(one);
            }

正则表达式- 将div#demo.demo转化成＜div id=“demo“ class=“demo“＞＜/div＞
weixin_47164448的博客
01-30 327
var str = ("div#demo.demo"); str.replace(/^(\w+)#(\w+)\.(\w+)$/,function(match,$1,$2,$3){ return "<"+$1+" id=\"" + $2+ "\" class=\""+ $3+ "\"><\/" + $1 +">" }) console.log(str); var str = ("div#demo.demo").replace(/^\b(\w+
正则表达式- 将div#demo.demo转化成<div id="demo" class="demo"></div>
Ethan的技术分享
04-14 1490
var str = ("div#demo.demo"); str.replace(/^(\w+)#(\w+)\.(\w+)$/,function(match,$1,$2,$3){ return "<"+$1+" id=\"" + $2+ "\" class=\""+ $3+ "\"><\/" + $1 +">" }) console.log(str);
字符串replace的理解和练习和配合正则表达式的使用
weixin_30839881的博客
09-26 255
下面代码展示了（demo地址 https://codepen.io/peach_/pen/jONJjRY）： 1.字符串replace的理解和练习和配合正则表达式的使用, 2.正则表达式学习 3.通过正则表达式实现千分位 // 字符串replace的理解和练习 //示例来源：https://developer.mozilla.org/zh-CN/docs/Web/JavaS...
div demo
weixin_30677475的博客
09-14 211
<div class="background"> <logintitle>自由的计算机世界</logintitle> <form name="loginForm" method="post" action=""> <p> 姓名: <in...
js 正则 demo
Rand Tsui
05-25 1313
/* js正则表达式有三种使用方法 第一种：使用 RegExp 对象 var rgx = new RegExp("[a-z]"); 第二种：使用 双斜杠 // var rgx = /[a-z]/; //与上面的写法等价 第三种：使用字符串 String 对象的方法
为什么我更改 权限 手机号 单位 过后不会在列表显示<template> <div class="common-layout"> <el-container> <el-header> <div class="header-content"> <h1>仓库管理系统</h1> <div class="user-info"> <span>欢迎, {{ loginInfor.usernames }}</span> </div> </div> </el-header> <el-container> <el-aside width="200px"> <el-menu default-active="dashboard" class="sidebar-menu" model="vertical" background-color="#00BFFF" text-color="#ffffff" active-text-color="#ffffff" @select="handleMenuSelect"> <div class="demo-collapse"> <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="仓库管理" name="1"> <div class="el-icon-download"> <el-menu-item @click="createNewContent" index="inbound">新型装备入库</el-menu-item> </div> <div> <el-menu-item index="inbound" @click="showDatainfor=true,showCKSPinfor=false,showbel=false">查询装备信息</el-menu-item> </div> <div> <el-menu-item index="inbound" @click="showDatainfor=false,showCKSPinfor=true,showbel=false">出库申请单审批</el-menu-item> </div> <div><el-menu-item index="inbound" @click="showDatainfor=false,showCKSPinfor=false,showbel=true">用户管理</el-menu-item></div> </el-collapse-item> </el-collapse> <el-menu-item index="inbound">报表统计</el-menu-item> <el-menu-item index="inbound">系统设置</el-menu-item> </div> </el-menu> </el-aside> <el-main> <div v-if="showDatainfor"><maindata /></div> <div v-if="showCKSPinfor"><CkCheck/></div> <div v-if="showbel"><Usertable/></div> </el-main> </el-container> </el-container> </div> <!-- 增加新装备弹窗 --> <el-dialog v-model="newuser" title="增加新装备" :center="true" width="30%"> <div class="newcountClass"> <el-form ref="registerFormRef" :model="newzhuangbei" :rules="rules" label-width="90px" class="register-form" > <el-form-item label="条形码/二维码" prop="qrcode"> <el-input v-model="newzhuangbei.qrcode" placeholder="请输入条形码/二维码" ></el-input> </el-form-item> <el-form-item label="名称" prop="totalname"> <el-input v-model="newzhuangbei.totalname" placeholder="请输入名称" ></el-input> </el-form-item> <el-form-item label="品牌" prop="brand" > <el-input v-model="newzhuangbei.brand" placeholder="请输入品牌" ></el-input> </el-form-item> <el-form-item label="型号" prop="model" > <el-input v-model="newzhuangbei.model" placeholder="请输入型号" ></el-input> </el-form-item> <el-form-item label="装备识别码" prop="equipmentcode" > <el-input v-model="newzhuangbei.equipmentcode" placeholder="请输入装备识别码" ></el-input> </el-form-item> <el-form-item label="所属单位" prop="roomlocation" > <el-input v-model="newzhuangbei.roomlocation" placeholder="请输入单位信息" ></el-input> </el-form-item> <el-form-item label="入库数量" prop="kcnum" > <el-input-number v-model="newzhuangbei.kcnum" :min="1" :max="10" @change="handleChange" /> </el-form-item> <el-form-item label="备注" prop="remark" > <el-input v-model="newzhuangbei.remark" placeholder="请输入备注信息" ></el-input> </el-form-item> <el-form-item label="登录时间" prop="totaldate" > <el-input v-model="newzhuangbei.totaldate" placeholder="请输入登录时间" ></el-input> </el-form-item> <el-form-item label="登录人员" prop="totaluser" > <el-input v-model="newzhuangbei.totaluser" placeholder="请输入登录人员" ></el-input> </el-form-item> <div class="button-container"> <el-button type="primary" @click="creatuserhandler" class="large-button" >新增成功</el-button> </div> </el-form> </div> </el-dialog> </template> <script setup> import { onMounted,reactive,ref } from 'vue'; import { dataUser } from "../Util/apirequest/test.js"; import { ElMessage } from "element-plus"; import maindata from "./maindata.vue"; import CkCheck from './ckCheck.vue'; import Usertable from './usertable.vue'; const showDatainfor=ref(true); const showCKSPinfor=ref(false); const showbel=ref(false); const newuser=ref(false) const loginInfor=reactive({ usernames:'', permits:'' }); onMounted(()=>{ // 默认进入页面执行 loginInfor.usernames = localStorage.getItem('loginInfor'); loginInfor.permits = localStorage.getItem('permit') }); function createNewContent() { if(loginInfor.permits==='\"超级管理员\"'){ newuser.value=true; } else{ ElMessage.error("权限不足"); } } const newzhuangbei=reactive({ qrcode:'',//二维码或条形码 totalname:'',//名称 brand:'',// model:'', equipmentcode:'', roomlocation:'', kcnum:',', remark:'', totaldate:'', totaluser:'', }); function creatuserhandler(){ dataUser(newzhuangbei).then((res) => { if(res.trim()=="error:二维码/条形码已存在!") { ElMessage.error("二维码/条形码已被使用!"); } else if(res.trim()=="true") { ElMessage.success("装备入库成功！"); newuser.value = false; // console.log('装备入库成功！'); } else { console.log(res); } }); } </script> <style lang='scss' scoped> /* 主内容区域样式已整合到el-main中 */ // 侧边栏样式 .sidebar { width: 200px; background-color: #43dad0; height: 100%; transition: all 0.3s; box-shadow: 2px 0 8px #1c929b; /* 右侧阴影 */ } .sidebar-menu { height: 100%; border-right: none; padding-top: 0px; /* 顶部留白 */ .el-submenu__title, .el-menu-item { height: 50px; line-height: 50px; font-size: 14px; padding-left: 24px !important; /* 增加左内边距 */ transition: all 0.2s; } // 图标样式统一 .el-submenu__title i, .el-menu-item i { width: 20px; text-align: center; margin-right: 10px; font-size: 16px; } // 选中状态优化 .el-menu-item.is-active { background-color: #11dcd8 !important; border-left: 3px solid #4bfff0; /* 左侧高亮条 */ } // hover效果 .el-submenu__title:hover, .el-menu-item:hover { background-color: rgba(71, 214, 230, 0.1) !important; } // 子菜单样式 .el-submenu .el-menu { background-color: #2b7fd8;/* 子菜单深色背景 */ } .el-submenu .el-menu-item { padding-left: 44px !important; /* 子菜单缩进 */ } } // 页面内容区域 .page-content { flex: 1; padding: 20px; overflow-y: auto; background-color: #f5f7fa; transition: all 0.3s; } </style><template> <div class="common-layout"> <el-container> <el-header> <div class="header-content"> <h1>仓库管理系统</h1> <div class="user-info"> <span>欢迎, {{ loginInfor.usernames }}</span> </div> </div> </el-header> <el-container> <el-aside width="200px"> <el-menu default-active="dashboard" class="sidebar-menu" model="vertical" background-color="#00BFFF" text-color="#ffffff" active-text-color="#ffffff" @select="handleMenuSelect"> <div class="demo-collapse"> <el-collapse v-model="activeNames" @change="handleChange"> <el-collapse-item title="仓库管理" name="1"> <div class="el-icon-download"> <el-menu-item @click="createNewContent" index="inbound">新型装备入库</el-menu-item> </div> <div> <el-menu-item index="inbound" @click="showDatainfor=true,showCKSPinfor=false,showbel=false">查询装备信息</el-menu-item> </div> <div> <el-menu-item index="inbound" @click="showDatainfor=false,showCKSPinfor=true,showbel=false">出库申请单审批</el-menu-item> </div> <div><el-menu-item index="inbound" @click="showDatainfor=false,showCKSPinfor=false,showbel=true">用户管理</el-menu-item></div> </el-collapse-item> </el-collapse> <el-menu-item index="inbound">报表统计</el-menu-item> <el-menu-item index="inbound">系统设置</el-menu-item> </div> </el-menu> </el-aside> <el-main> <div v-if="showDatainfor"><maindata /></div> <div v-if="showCKSPinfor"><CkCheck/></div> <div v-if="showbel"><Usertable/></div> </el-main> </el-container> </el-container> </div> <!-- 增加新装备弹窗 --> <el-dialog v-model="newuser" title="增加新装备" :center="true" width="30%"> <div class="newcountClass"> <el-form ref="registerFormRef" :model="newzhuangbei" :rules="rules" label-width="90px" class="register-form" > <el-form-item label="条形码/二维码" prop="qrcode"> <el-input v-model="newzhuangbei.qrcode" placeholder="请输入条形码/二维码" ></el-input> </el-form-item> <el-form-item label="名称" prop="totalname"> <el-input v-model="newzhuangbei.totalname" placeholder="请输入名称" ></el-input> </el-form-item> <el-form-item label="品牌" prop="brand" > <el-input v-model="newzhuangbei.brand" placeholder="请输入品牌" ></el-input> </el-form-item> <el-form-item label="型号" prop="model" > <el-input v-model="newzhuangbei.model" placeholder="请输入型号" ></el-input> </el-form-item> <el-form-item label="装备识别码" prop="equipmentcode" > <el-input v-model="newzhuangbei.equipmentcode" placeholder="请输入装备识别码" ></el-input> </el-form-item> <el-form-item label="所属单位" prop="roomlocation" > <el-input v-model="newzhuangbei.roomlocation" placeholder="请输入单位信息" ></el-input> </el-form-item> <el-form-item label="入库数量" prop="kcnum" > <el-input-number v-model="newzhuangbei.kcnum" :min="1" :max="10" @change="handleChange" /> </el-form-item> <el-form-item label="备注" prop="remark" > <el-input v-model="newzhuangbei.remark" placeholder="请输入备注信息" ></el-input> </el-form-item> <el-form-item label="登录时间" prop="totaldate" > <el-input v-model="newzhuangbei.totaldate" placeholder="请输入登录时间" ></el-input> </el-form-item> <el-form-item label="登录人员" prop="totaluser" > <el-input v-model="newzhuangbei.totaluser" placeholder="请输入登录人员" ></el-input> </el-form-item> <div class="button-container"> <el-button type="primary" @click="creatuserhandler" class="large-button" >新增成功</el-button> </div> </el-form> </div> </el-dialog> </template> <script setup> import { onMounted,reactive,ref } from 'vue'; import { dataUser } from "../Util/apirequest/test.js"; import { ElMessage } from "element-plus"; import maindata from "./maindata.vue"; import CkCheck from './ckCheck.vue'; import Usertable from './usertable.vue'; const showDatainfor=ref(true); const showCKSPinfor=ref(false); const showbel=ref(false); const newuser=ref(false) const loginInfor=reactive({ usernames:'', permits:'' }); onMounted(()=>{ // 默认进入页面执行 loginInfor.usernames = localStorage.getItem('loginInfor'); loginInfor.permits = localStorage.getItem('permit') }); function createNewContent() { if(loginInfor.permits==='\"超级管理员\"'){ newuser.value=true; } else{ ElMessage.error("权限不足"); } } const newzhuangbei=reactive({ qrcode:'',//二维码或条形码 totalname:'',//名称 brand:'',// model:'', equipmentcode:'', roomlocation:'', kcnum:',', remark:'', totaldate:'', totaluser:'', }); function creatuserhandler(){ dataUser(newzhuangbei).then((res) => { if(res.trim()=="error:二维码/条形码已存在!") { ElMessage.error("二维码/条形码已被使用!"); } else if(res.trim()=="true") { ElMessage.success("装备入库成功！"); newuser.value = false; // console.log('装备入库成功！'); } else { console.log(res); } }); } </script> <style lang='scss' scoped> /* 主内容区域样式已整合到el-main中 */ // 侧边栏样式 .sidebar { width: 200px; background-color: #43dad0; height: 100%; transition: all 0.3s; box-shadow: 2px 0 8px #1c929b; /* 右侧阴影 */ } .sidebar-menu { height: 100%; border-right: none; padding-top: 0px; /* 顶部留白 */ .el-submenu__title, .el-menu-item { height: 50px; line-height: 50px; font-size: 14px; padding-left: 24px !important; /* 增加左内边距 */ transition: all 0.2s; } // 图标样式统一 .el-submenu__title i, .el-menu-item i { width: 20px; text-align: center; margin-right: 10px; font-size: 16px; } // 选中状态优化 .el-menu-item.is-active { background-color: #11dcd8 !important; border-left: 3px solid #4bfff0; /* 左侧高亮条 */ } // hover效果 .el-submenu__title:hover, .el-menu-item:hover { background-color: rgba(71, 214, 230, 0.1) !important; } // 子菜单样式 .el-submenu .el-menu { background-color: #2b7fd8;/* 子菜单深色背景 */ } .el-submenu .el-menu-item { padding-left: 44px !important; /* 子菜单缩进 */ } } // 页面内容区域 .page-content { flex: 1; padding: 20px; overflow-y: auto; background-color: #f5f7fa; transition: all 0.3s; } </style>
08-27
2. **校验集成**：若需手机号格式校验，可参考引用[3]的正则表达式 `validateMobile` 方法[^3]。 3. **权限控制**：如果“修改权限”涉及禁用字段，使用 `el-input` 的 `disabled` 属性而非移除绑定，避免响应式中断...
<template> <div class="comprehensive-evaluation"> <!-- 查询和操作栏 --> <el-card class="search-card"> <el-form :inline="true" :model="queryForm"> <el-form-item label="学生ID"> <el-input v-model="queryForm.studentId" placeholder="请输入学生ID" clearable ></el-input> </el-form-item> <el-form-item label="学生姓名"> <el-input v-model="queryForm.studentName" placeholder="请输入学生姓名" clearable ></el-input> </el-form-item> <el-form-item label="学年"> <el-input v-model="queryForm.academicYear" placeholder="请输入学年" clearable ></el-input> </el-form-item> <el-form-item label="学期"> <el-select v-model="queryForm.semester" placeholder="请选择学期" clearable > <el-option label="第一学期" value="第一学期"></el-option>
04-14
每个字段的规则可能包括必填项、类型检查、正则表达式匹配等。例如，学号需要是数字且长度符合要求，学年需要符合YYYY-YYYY的格式。这里可能需要自定义校验函数，比如检查学年格式是否正确，或者异步校验学号是否...
vue前端展示了检索的的requirement列表后，通过点击查看主页查看详细requirement信息，然后点击返回后为什么检索列表为空了，以下为详细代码 <!-- --> <template> <div> <div class="tagdiv"> <!-- <el-tag v-for="tag in tags" :key="tag.label" :hit="true" type="success" style="margin-left:5px;margin-bottom:4px" size="small" @close="tagclose(tag)" closable>{{tag.value}}</el-tag> --> </div> <div class="inputdiv"> <!-- @keyup.enter.native="inputchange" --> <!-- 回车增加标签 --> <el-input v-model="selectvalue" style="width:500px;text-align:right" size="small" @keyup.enter.native="easySelect" :placeholder="inputplaceholder"> <el-select v-model="selectchange" placeholder="检索方向" slot="prepend" @change="dropdownchange" class="selectchange"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> </el-input> <el-tooltip effect="light" content="搜索" placement="top"> <el-button icon="el-icon-search" style="margin-left:5px" size="small" @click="easySelect" circle></el-button> </el-tooltip> <a href="#" target="_self" rel="noopener noreferrer" style="font-size:90%;margin-left:1%;" @click="highselect = true">高级检索</a> <a href="#" target="_self" rel="noopener noreferrer" style="font-size:90%;margin-left:1%;" @click="resetdata">重置</a> </div> <!-- 搜索结果条数 --> <div style="margin-top:0.5%;margin-bottom:1%;font-size:85%;"> 搜索结果 <span style="margin-left:1%;margin-right:1%;color:green;"> {{count}} </span> 条 <span style="color:rgba(36, 36, 196, 0.925)">{{title}}</span> </div> <!-- 表格 --> <el-table id="el-table" :data="tableData" border max-height="500" :header-cell-class-name="headerRow" :cell-class-name="cellClass" :row-style="{height:'40px'}" :cell-style="{padding:'7px 0'}"> <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" class="demo-table-expand"> <el-form-item label="需求时间："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.requirementtime"></span> </el-form-item> <el-form-item label="需求背景："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.requirementbackground"></span> </el-form-item> <el-form-item label="需求内容："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.requirementcontents"></span> </el-form-item> <el-form-item label="需求描述："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.requirementdescribe"></span> </el-form-item> <el-form-item label="允收标准："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.acceptstandard"></span> </el-form-item> <el-form-item label="技术寻源："> <span style="white-space: pre-line !important;display: inline-block;font-size:85%;text-align:left" v-html="props.row.technicalsource"></span> </el-form-item> </el-form> </template> </el-table-column> <el-table-column prop="id" label="ID" width="50" align="center"> </el-table-column> <!-- <el-table-column prop="achievements" label="科研成果" width="100" align="center"> </el-table-column> --> <el-table-column prop="requirement" label="需求名称" width="300" align="center"> <template slot-scope="props"> <span v-html="props.row.requirement"></span> </template> </el-table-column> <el-table-column prop="department" label="需求组织" width="200" align="center"> <template slot-scope="props"> <span v-html="props.row.department"></span> </template> </el-table-column> <!-- <el-table-column prop="researchdirector" label="研究方向" width="250" align="center"> </el-table-column> --> <el-table-column prop="liaisonman" label="需求联系人" width="150" align="center"> <template slot-scope="props"> <span v-html="props.row.liaisonman"></span> </template> </el-table-column> <el-table-column prop="telphone" label="联系方式" width="150" align="center"> </el-table-column> <el-table-column prop="technicalfield" label="技术领域/关键词" align="center"> <template slot-scope="props"> <span v-html="props.row.technicalfield"></span> </template> </el-table-column> <el-table-column prop="budget" label="预算" width="150" align="center"> </el-table-column> <el-table-column prop="requirementtime" label="需求提出时间" width="200" align="center"> </el-table-column> <!-- <el-table-column prop="technicalsource" label="技术寻源" align="center"> </el-table-column> --> <!-- <el-table-column prop="cooperation" label="是否合作" width="120" align="center"> <template slot-scope="props"> <span> {{props.row.iscooperated === 0 ? '否':'是'}} </span> </template> </el-table-column> --> <el-table-column label="操作" width="130" align="center"> <template slot-scope="scope"> <el-button type="primary" size="mini" icon="el-icon-user" style="margin-left:10px" @click="gotorequirementinfo(scope.$index, scope.row)" slot="reference">查看主页</el-button> </template> </el-table-column> </el-table> <!-- 分页插件 --> <el-pagination style="right:45%;position:absolute;margin-top:1%" background layout="prev, pager, next,jumper" :page-size="7" @current-change="pageChange" :current-page.sync="currentPage" :total="page"> </el-pagination> <!-- 高级搜索选项 --> <el-dialog title="高级搜索" :visible.sync="highselect" width="35%" :close-on-click-modal="false" center> <span style="font-size:100%;font-weight:bold;">需求名称：</span> <el-autocomplete popper-class="my-autocomplete" v-model="highselectvalue.requirement" size="small" style="width:220px" placeholder="需求名称" @keyup.enter.native="highselectfunction" id="requirement"> <template slot-scope="{ item }"> <div class="name">{{ item.value }}</div> </template> </el-autocomplete> <br><br> <span style="font-size:100%;font-weight:bold">需求组织：</span> <el-autocomplete popper-class="my-autocomplete" v-model="highselectvalue.department" :fetch-suggestions="querySearch" size="small" style="width:220px" placeholder="中心/部门/科室" @keyup.enter.native="highselectfunction" id="department"> <template slot-scope="{ item }"> <div class="name">{{ item.value }}</div> </template> </el-autocomplete> <br><br> <span style="font-size:100%;font-weight:bold">需求联系人：</span> <el-input class="inputnormal" size="small" style="width:320px;" placeholder="需求联系人" @keyup.enter.native="highselectfunction" v-model="highselectvalue.liaisonman"> </el-input> <br><br> <span style="font-size:100%;font-weight:bold">需求类型：</span> <el-input class="inputnormal" size="small" style="width:320px;" placeholder="需求类型" @keyup.enter.native="highselectfunction" v-model="highselectvalue.requirementtype"> </el-input> <br><br> <span style="font-size:100%;font-weight:bold">需求方向：</span> <el-input class="inputnormal" size="small" style="width:320px;" placeholder="需求方向搜索项" @keyup.enter.native="highselectfunction" v-model="highselectvalue.requirementcontents"> </el-input> <span slot="footer" class="dialog-footer"> <el-button @click="highselect = false" size="mini">取 消</el-button> <el-button type="primary" @click="highselectfunction()" size="mini">检索</el-button> </span> </el-dialog> </div> </template> <script> import { request } from "../../network/request"; import router from '../../router'; export default { name: 'requirementview', data () { return { options: [ { label: '需求名称', value: '需求名称' }, { label: '需求组织', value: '需求组织' }, { label: '需求联系人', value: '需求联系人' }, { label: '需求类型', value: '需求类型' }, { label: '需求方向', value: '需求方向' }, ], selectchange: '需求名称', selectFieldType: 'requirement', selectvalue: '', inputplaceholder: '请输入搜索需求名称内容,内容不能为空', tags: [], highselect: false, highselectvalue: { requirement: '', department: '', liaisonman: '', requirementtype: '', requirementcontents: '' }, requirementinfoList: [], tableData: [], count: 0, page: 1, title: '', selectDirecat: '需求名称', departments: [], currentPage: 1, show: false, } }, methods: { headerRow (row, column, rowIndex, columnIndex) { return 'headerRow'; }, cellClass (row, column, rowIndex, columnIndex) { return 'cellClass'; }, createFilter (queryString) { return (labelValue) => { return (labelValue.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0); }; }, // 需求组织的输入建议 querySearch (queryString, cb) { var departments = this.departments; var results = queryString ? departments.filter(this.createFilter(queryString)) : departments; // 调用 callback 返回建议列表的数据 cb(results); }, // querydepartments (queryString, cb) { // let department = []; // for (let i = 0; i < this.departments.length; i++) { // let label = this.departments[i].label // if (this.highselectvalue.department === label) { // department = this.departments[i].labels; // break; // } // } // if (department.length === 0) department = [{ 'value': '无匹配输入建议' }] // var results = queryString ? department.filter(this.createFilter(queryString)) : department; // clearTimeout(this.timeout); // this.timeout = setTimeout(() => { // cb(results); // }, 1000 * Math.random()); // }, //获得组织信息 loadAll () { let config = { url: '/requirement/requirementinfo/department', method: 'post', } request(config).then( res => { this.departments = res.data.data[0]; }, ).catch( err => { this.$message({ showClose: true, message: "获取需求组织失败", type: "error" }); } ) }, dropdownchange (value) { this.tags = []; this.inputplaceholder = "请输入搜索" + value + "内容,内容不能为空"; //搜索方向 - 后台 FieldType switch (value) { case "需求名称": this.selectFieldType = 'requirement'; this.selectDirecat = '需求名称'; break; case "需求组织": this.selectFieldType = 'department'; this.selectDirecat = '需求组织'; break; case "需求联系人": this.selectFieldType = 'liaisonman'; this.selectDirecat = '需求联系人'; break; case "需求类型": this.selectFieldType = 'requirementtype'; this.selectDirecat = '需求类型'; break; case "需求方向": this.selectFieldType = 'requirementcontents'; this.selectDirecat = '需求方向'; break; } }, inputchange () { let tagtemp = { label: this.selectvalue, value: this.selectvalue }; this.tags.push(tagtemp); this.selectvalue = ''; }, //tag删除功能 tagclose (tag) { this.tags.splice(this.tags.indexOf(tag), 1); }, resetdata () { Object.assign(this.$data.highselectvalue, this.$options.data().highselectvalue).assign; // Object.assign(this.$data.selectvalue, this.$options.data().selectvalue); this.selectvalue = ''; this.selectFieldType = 'requirement'; this.selectchange = '需求名称'; this.selectDirecat = '需求名称'; }, //高级搜索功能 highselectfunction () { if (this.highselectvalue.requirement == '' && this.highselectvalue.department == '' && this.highselectvalue.liaisonman == '' && this.highselectvalue.requirementcontents == '' && this.highselectvalue.requirementtype == '' ) { this.highselect = false; return; } let config = { url: "/requirement/select/highselect", method: "get", params: this.highselectvalue } request(config).then( res => { this.requirementinfoList = res.data.list; this.tableData = this.requirementinfoList[0]; this.count = res.data.data.count; this.page = res.data.data.count; this.currentPage = 1; this.highselect = false; this.title = "（ [高级搜索] " + (this.highselectvalue.requirement == '' ? '' : '需求名称：' + this.highselectvalue.requirement) + (this.highselectvalue.department == '' ? '' : '，需求组织：' + this.highselectvalue.department) + (this.highselectvalue.liaisonman == '' ? '' : '，需求联系人：' + this.highselectvalue.liaisonman) + (this.highselectvalue.requirementtype == '' ? '' : '，需求类型：' + this.highselectvalue.requirementtype) + (this.highselectvalue.requirementcontents == '' ? '' : '，需求方向：' + this.highselectvalue.requirementcontents) + ' ）' // this.title = "（ " + this.selectDirecat + "：" + this.selectvalue + " ）" } ) }, easySelect () { if (this.selectvalue == '' || this.selectvalue == null) { return; } let params = { FieldType: this.selectFieldType, queryMsg: this.selectvalue } let config = { url: "/requirement/select/simpleselect", method: "get", params: params } request(config).then( res => { this.requirementList = res.data.list; this.tableData = this.requirementList[0]; this.count = res.data.data.count; this.page = res.data.data.count; this.title = "（ " + this.selectDirecat + "：" + this.selectvalue + " ）"; this.currentPage = 1; } ) }, pageChange (val) { this.tableData = this.requirementList[val - 1]; //索引需要减一 }, gotorequirementinfo (index, row) { //教师姓名被标红的话会增加不必要的字符串 let requirement = row.requirement; // requirement = requirement.replace("<b><font color='red'>", ''); // requirement = requirement.replace("</font></b>", ''); requirement = requirement.replace(/<\/?b>|<font color='red'>|<\/font>/g, ''); router.push('/requirementviewinfo/' + row.id + '&' + requirement); }, }, mounted () { this.loadAll(); }, } </script> <style scoped> .selectchange { width: 105px; /* font-weight: bold; */ font-size: 110%; color: rgba(53, 48, 48, 0.993); } .tagdiv { margin-bottom: 3px; min-height: 12px; text-align: center; } .inputdiv { text-align: center; } .inputnormal { width: 30%; } #el-table >>> .headerRow { /* height: 28px!important; */ font-size: 80%; color: black; font-weight: bold; /* color: rgba(36, 36, 196, 0.925); */ /* background-color: cadetblue; */ } #el-table >>> .cellClass { font-size: 75%; } #el-table >>> .cellClass .cell { white-space: pre-line !important; } .demo-table-expand { font-size: 0; text-align: left; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 100%; } </style> <!-- --> <template> <div> <el-container> <el-aside width="150px" class="leftdiv"> <el-page-header @back="goBack" class="backheader" content=""> </el-page-header> </el-aside> </el-container> <el-container> <el-main style="padding:10px"> <!-- 组件缓存 --> <keep-alive> <!-- 动态组件 --> <component :is="tabComponent" style="margin-left: 2%;min-height:550px" ref="requirementinfocomponent" @normalinfotest="normalinfochange" :requirementinfo="requirementinfo" :visitexcelData="visitexcelData"></component> </keep-alive> </el-main> </el-container> </div> </template> <script> import { request } from "../../network/request"; import requirementinfocomponent from '@/components/teacher/teacherpersoncomponent/requirementinfocomponent' import test from '@/components/test/test' import router from '../../router'; export default { components: { requirementinfocomponent, test}, props: { id: String, requirement: String }, data () { return { requirementinfo: { id: '', requirement: '', department: '', liaisonman: '', telphone: '', requirementtype: 0, technicalfield:'', requirementtime: '', requirementbackground : '', requirementdescribe : '', requirementcontents: '', acceptstandard: '', budget: '', assessment:'', technicalsource: '', visitexcel: '', // visitexcelData:[], }, // visitexcelData:[], technicalsourcetable:[], tabComponent: requirementinfocomponent, } }, methods: { getRequirement () { if (this.id == undefined || this.requirement == undefined) { router.go(-1); } const loading = this.$loading({ lock: true, text: '加载信息中...', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)' }); let config = { url: "/requirement/requirementinfo/requirementinfoget", method: "post", data: { id: this.id, requirement: this.requirement } } request(config).then( res => { this.requirementinfo = res.data.data; // this.fetchtechnicalsourceInfo(); loading.close(); } ).catch(err => { loading.close(); this.$message({ showClose: true, message: err.data.message, type: "error" }); }) }, getfilenames () { this.visitexcelData = [];//表格内容置空，然后在插入 let param = { id: this.id, requirement: this.requirement, filetype: "附件" } // console.log('getfilenames 返回的教师信息1:', this.requirementinfo); let config = { url: "/requirement/requirementinfo/getRequirementFileTableData", method: "get", params: param } request(config).then( res => { let data = res.data; let fileNameList = data.list; for (let i = 0; i < fileNameList.length; i++) { let tempname = { fileName:fileNameList[i] }; this.visitexcelData.push(tempname); } // console.log('API 返回的教师信息:', this.visitexcelData); }) }, goBack () { // router.go(-1); window.history.back(); }, normalinfochange (data) { let config = { url: "/requirement/requirementinfo/requirementinfoupdate", method: "post", data: data } request(config).then( res => { this.requirementinfo.liaisonman = data.liaisonman == '' ? this.requirementinfo.liaisonman : data.liaisonman; this.requirementinfo.telphone = data.telphone == '' ? this.requirementinfo.telphone : data.telphone; this.requirementinfo.requirementbackground = data.requirementbackground == '' ? this.requirementinfo.requirementbackground : data.requirementbackground; this.requirementinfo.requirementdescribe = data.requirementdescribe == '' ? this.requirementinfo.requirementdescribe : data.requirementdescribe; this.requirementinfo.requirementcontents = data.requirementcontents == '' ? this.requirementinfo.requirementcontents : data.requirementcontents; this.requirementinfo.acceptstandard = data.acceptstandard == '' ? this.requirementinfo.acceptstandard : data.acceptstandard; this.requirementinfo.budget = data.budget == '' ? this.requirementinfo.budget : data.budget; this.requirementinfo.technicalsource = data.technicalsource == '' ? this.requirementinfo.technicalsource : data.technicalsource; this.$message({ showClose: true, message: "更新成功", type: "success", duration: 10000 }); // this.fetchtechnicalsourceInfo(); } ).catch(err => { this.$message({ showClose: true, message: "更新失败，请稍候重试", type: "error", duration: 10000 }); }) }, }, created: function () { this.getRequirement(); this.getfilenames(); }, beforeCreate: function () { }, } </script> <style scoped> .leftdiv { height: 30px; } .backheader { /* font-weight: bold; */ font-size: 120%; /* position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */ } .backheader:hover { color: rgb(35, 167, 167); } </style>
08-28
在 Vue 中，如果需求名称中包含 `<b><font color='red'>` 这类 HTML 标签，并且希望去除这些标签后再展示，可以使用正则表达式进行替换[^5]。 例如，在模板中使用 `v-text` 指令结合 `replace` 方法去除 HTML 标签...
<!-- 权限管理 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="../../layui/css/layui.css"> <link rel="stylesheet" href="../../css/diy.css"> <style> .layui-body { overflow-x: scroll; } </style> </head> <body> <div class="section1"> <!-- 内容主体区域 --> <div class="manu auth" style="padding: 15px;"> <form class="layui-form" action=""> <div class="form-input-box-t layui-form-item"> <div class="input-box"> <label class="layui-form-label">权限名</label> <div class="layui-input-block input-i block"> <input type="text" name="mod_name" required lay-verify="required" autocomplete="off" class="layui-input"> </div> </div> <div class="input-box"> <label class="layui-form-label">用户组</label> <div class="layui-input-block select block"> <select name="user_group" lay-filter="required" id="user_group"> <option value=""></option> </select> </div> </div> <div class="input-box"> <label class="layui-form-label">添加权限</label> <div class="layui-input-block select block"> <select name="add" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select> </div> </div> <div class="input-box"> <label class="layui-form-label">修改权限</label> <div class="layui-input-block select block"> <select name="set" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select> </div> </div> <div class="input-box"> <label class="layui-form-label">删除权限</label> <div class="layui-input-block select block"> <select name="del" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select> </div> </div> <div class="input-box"> <label class="layui-form-label">查询权限</label> <div class="layui-input-block select block"> <select name="get" lay-filter="required"> <option value=""></option> <option value="0">无</option> <option value="1">有</option> </select> </div> </div> </div> </form> <div class="buts"> <button type="button" class="layui-btn layui-btn-normal" id="inquire"><span>查询</span></button> <button type="button" class="layui-btn layui-btn-normal" id="reset"><span>重置</span></button> </div> <div class="Customize-the-box"> <div class="circle"></div> <div class="circle"></div> <div class="card-inner"></div> </div> </div> <h1>数据列表</h1> <div class="table"> <table class="layui-hide" id="newsClassification" lay-filter="newsClassification"></table> <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="add">修改</button> </div> </script> </div> </div> <script src="../../layui/layui.js"></script> <script src="../../js/axios.min.js"></script> <script src="../../js/index.js"></script> <script src="../../js/base.js" charset="utf-8"></script> <script> var BaseUrl = baseUrl() layui.use(['element', 'layer', 'util'], function () { var element = layui.element , table = layui.table , layer = layui.layer , util = layui.util , $ = layui.$; let personInfo = JSON.parse(sessionStorage.personInfo) let user_group = personInfo.user_group let token = sessionStorage.token || null //头部事件 util.event('lay-header-event', { //左侧菜单事件 menuLeft: function (othis) { layer.msg('展开左侧菜单的操作', {icon: 0}); } , menuRight: function () { layer.open({ type: 1 , content: '<div style="padding: 15px;">处理右侧面板的操作</div>' , area: ['260px', '100%'] , offset: 'rt' //右上角 , anim: 5 , shadeClose: true }); } }); // table 事件 table.render({ elem: '#newsClassification' , toolbar: true , url: BaseUrl + '/api/auth/get_list' , headers: { 'x-auth-token': token, 'Content-Type': 'application/json' } ,limits: [10] , page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档 layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局 //,curr: 5 //设定初始在第 5 页 , groups: 1 //只显示 1 个连续页码 , first: false //不显示首页 , last: false //不显示尾页 } , cols: [[ {type: 'checkbox'} , {field: 'user_group', width: '10%', title: '用户组'} , {field: 'mod_name', width: '10%', title: '权限名称', templet: function (d) { if (d.path.replace('/'+d.table_name+'/','')=='table') { return "<div>"+d.mod_name+"后台列表</div>" } if (d.path.replace('/'+d.table_name+'/','')=='view') { return "<div>"+d.mod_name+"后台详情</div>" } if (d.path.replace('/'+d.table_name+'/','')=='list') { return "<div>"+d.mod_name+"前台列表</div>" } if (d.path.replace('/'+d.table_name+'/','')=='details') { return "<div>"+d.mod_name+"前台详情</div>" } if (d.path.replace('/'+d.table_name+'/','')=='edit') { return "<div>"+d.mod_name+"前台编辑</div>" } } } , { field: 'add', width: '10%', title: '<span>添加</span>权限', templet: function (d) { if (d.add == '0') { return "<div>无</div>" } else { return "<div>有</div>" } } } , { field: 'del', width: '10%', title: '<span>删除</span>权限', templet: function (d) { if (d.del == '0') { return "<div>无</div>" } else { return "<div>有</div>" } } } , { field: 'set', width: '10%', title: '修改权限', templet: function (d) { if (d.set == '0') { return "<div>无</div>" } else { return "<div>有</div>" } } } , { field: 'get', width: '10%', title: '<span>查询</span>权限', templet: function (d) { if (d.get == '0') { return "<div>无</div>" } else { return "<div>有</div>" } } } , { field: 'create_time', width: '15%', title: '新增时间', sort: true, templet: "<div>{{layui.util.toDateString(d.create_time, 'yyyy-MM-dd HH:mm:ss')}}</div>" } , { field: 'update_time', width: '15%', title: '更新时间', sort: true, templet: "<div>{{layui.util.toDateString(d.update_time, 'yyyy-MM-dd HH:mm:ss')}}</div>" } , {field: 'operate', title: '操作', toolbar: "#toolbarDemo"} ]] , page: true, request: { limitName: 'size' }, response: { statusName: 'code', //规定返回/Back的状态码字段为code statusCode: 200 //规定成功的状态码味200 }, parseData: function (res) { return { "code": 200, "msg": "", "count": res.result.count, "data": res.result.list } }, where: {like: 0, size: 10} }); layui.table.on('tool(newsClassification)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = obj.tr; //获得当前行 tr 的DOM对象 if (layEvent == "add") { let auth_id = data.auth_id // window.location = ('./view.html?' + auth_id) layopen_dateil('./view.html?' + auth_id) } }); // 请求参数： let request = {like: 0, size: 10, page: 1, mod_name: '', user_group: '',add:'',set:'',del:'',get:'',orderby: 'create_time desc'} // <span>重置</span>/Reset参数 let resetName = {like: 0, size: 10, page: 1, orderby: 'create_time desc'} fun('newsClassification', BaseUrl + '/api/auth/del', 'auth_id', request, resetName) async function get_list_user_group() { $.ajax({ url: BaseUrl + "/api/user_group/get_list", type: "get", async: false, success: function (data) { if (data && typeof data === 'string'){ data = JSON.parse(data); } if (data.result) { // 拿到单选框的父级节点 let select = document.querySelector("#user_group") let op1 = document.createElement('option') select.appendChild(op1) // 收集数据 长度 let count // 收集数据 数组 let arr = [] count = data.result.count arr = data.result.list for (let i = 0; i < arr.length; i++) { // 创建节点 let op = document.createElement('option') // 给节点赋值 op.innerHTML = arr[i].name op.value = arr[i].name // 新增/Add节点 select.appendChild(op) layui.form.render('select') } } } }); } get_list_user_group(); }); </script> </body> </html> 分析以上代码功能，不要自己写
05-28
这需要优化，可能使用正则表达式或更灵活的方法，如引用[2]中的代码高亮处理方式，通过类名或属性来识别路径类型。 Token验证方面，代码在请求头中添加了x-auth-token，但未处理Token失效的情况。引用[4]提到的防抖...
<template> <div class="feedback boxBack"> <div class="bg-size"></div> <div class="bg-blur"></div> <div class="mian"> <div class="topbar"> <span class="text">意见反馈</span> </div> <!-- 表单 --> <div class="feedbackBox"> <!-- 浏览器 --> <div class="wrap"> <div class="item-label"> <icon-browser class="browserImg"></icon-browser> <span class="browser">浏览器</span> </div> <el-radio-group v-model="browserValue" class="radio-group"> <el-radio v-for="item in browserOptions" :key="item.id" :label="item.id" class="radio-item"> {{ item.name }} </el-radio> </el-radio-group> <el-input v-if="browserValue === 6" v-model="otherBrowser" class="resetInput" placeholder="请输入浏览器名称" style="margin-top: 10px; width: 200px;" /> </div> <div class="wrap"> <div class="item-label"> <icon-business class="browserImg"></icon-business> <span class="browser">业务</span> </div> <div class="header"> <el-radio-group v-model="businessValue" class="radio"> <el-radio v-for="item in businessOptions" :key="item.id" :label="item.id" class="radio-item"> {{ item.name }} </el-radio> </el-radio-group> </div> </div> <div class="wrap"> <div class="item-label"> <icon-suggestion class="browserImg"></icon-suggestion> <span class="browser">建议</span> </div> <div class="header"> <el-input v-model="suggestion" type="textarea" :rows="4" placeholder="请填写问题描述，10~500个字" class="text-input resetInput" /> </div> </div> <div class="wrap"> <div class="item-label"> <icon-attachment class="browserImg"></icon-attachment> <span class="browser">附件</span> </div> <div class="header"> <upload title="上传附件" :maxSize="10" action="/csc/feedback/upload" v-model="attachmentUrl" @uploadSuccess="handleAttachmentSuccess" @delete="handleAttachmentDelete" /> <div class="file-info"> <div>&middot;类型：图片</div> <div>&middot;格式：仅支持 jpg、gif、png、pdf、bmp格式</div> </div> </div> </div> <div class="wrap"> <div class="form-item"> <div class="item-label"> <icon-email class="browserImg"></icon-email> <span>邮箱</span> </div> <el-input v-model="email" placeholder="请填写邮箱，10~50个字" style="width: 80%;" class="text-input resetInput" /> </div> </div> <div class="button-group"> <el-button type="primary" class="submit-btn" @click="onSubmit">提交反馈</el-button> <el-button type="default" class="cancel-btn" @click="onCancel">取消</el-button> </div> </div> </div> </div> </template> <script setup> import { ref } from 'vue' import { useRouter } from 'vue-router' import { feedback } from '@/api/user' import { ElNotification } from 'element-plus' const otherBrowser = ref('') const router = useRouter() const suggestion = ref('') const radio = ref(3) const browserValue = ref(0) const businessValue = ref(0) const email = ref('') const browserOptions = [ { id: 0, name: 'Google Chrome', }, { id: 1, name: 'Mozilla Firefox', }, { id: 2, name: 'Apple Safari', }, { id: 3, name: '360浏览器', }, { id: 4, name: '夸克浏览器', }, { id: 5, name: 'QQ浏览器', }, { id: 6, name: '其他', }, ] const businessOptions = [ { id: 0, name: '我的账户', }, { id: 1, name: '快速开卡', }, { id: 2, name: '卡片列表', }, { id: 3, name: '持卡信息', }, { id: 4, name: '交易查询', }, { id: 5, name: '卡片资金', }, { id: 6, name: '充值记录', }, ] const onSubmit = () => { if (!suggestion.value.trim() || suggestion.value.length < 10 || suggestion.value.length > 500) { ElNotification.warning('请填写10~500字的问题描述'); return; } if (browserValue.value === 6 && !otherBrowser.value.trim()) { ElNotification.warning('请输入其他浏览器名称'); return; } if (email.value && !/^\S+@\S+\.\S+$/.test(email.value)) { ElNotification.warning('请输入正确的邮箱格式'); return; } let browserStr = ''; if (browserValue.value === 6) { browserStr = otherBrowser.value.trim(); } else { const selectedBrowser = browserOptions.find(item => item.id === browserValue.value); browserStr = selectedBrowser ? selectedBrowser.name : ''; } const selectedBusiness = businessOptions.find(item => item.id === businessValue.value); const businessStr = selectedBusiness ? selectedBusiness.name : ''; const queryParams = { page: '', size: '', id: '', status: '', isRead: '', browser: browserStr, business: businessStr, reviewer: '', startTime: '', endTime: '' }; feedback(queryParams) .then(response => { if (response.code === 200) { ElNotification.log('提交反馈列表成功', response.data); router.go(-1); } else { console.log('response', queryParams) ElNotification.error({ message: `提交失败：${response.msg || '未知错误'}` }); } }) .catch(error => { ElNotification.error('接口调用异常', error); }); }; const onCancel = () => { router.go(-1) } </script> <style scoped lang="scss"> .feedback { display: flex; flex-direction: column; height: 100%; border-radius: 0; padding: 34px 20px 70px 20px; position: relative; min-height: 100vh; .mian { display: flex; flex-direction: column; } .topbar { display: flex; justify-content: center; z-index: 100; .text { font-size: 32px; line-height: 42px; background: linear-gradient(90.56deg, #169AF4 0%, #CD17F3 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: bold; } } .feedbackBox { width: 100%; flex-direction: column; height: 100%; padding: 0 20px 20px 20px; z-index: 100; .wrap { width: 100%; height: auto; background: linear-gradient(90.18deg, #655CB926 0%, #352F8314 100%); border: 1px solid #7948EA; border-radius: 12px; padding: 26px 0 30px 42px; margin-top: 22px; .item-label { display: flex; align-items: center; margin-bottom: 20px; color: #fff; font-size: 18px; .browserImg { color: #fff !important; width: 20px; height: 20px; margin-right: 4px; } } .radio-group { display: flex; flex-wrap: wrap; gap: 70px; padding: 5px 0; margin-left: 20px; } .resetInput { margin-left: 20px; /* 与单选框左侧对齐 */ } .radio { display: flex; flex-wrap: wrap; gap: 95px; padding: 5px 0; margin-left: 20px; } .radio-item { color: #fff; font-size: 16px; } &:hover { color: #d0c4ff; } .browser { color: #ffffff; font-size: 20px; line-height: 29px; } .header { display: flex; .upload-demo { width: 121px; height: 64px; } } .uploader { width: 160px; height: 64px; } .file-info { font-size: 14px; flex: 1; gap: 15px; margin-top: 135px; color: #fff; } } } .button-group { display: flex; width: 100%; margin-top: 60px; justify-content: center; .submit-btn { width: 120px; height: 40px; border-radius: 8px; background: linear-gradient(-96.34deg, #18C8FF 0%, #933FFE 100%); } .cancel-btn { width: 120px; height: 40px; border-radius: 8px; background: #E5E5E51E; border: 1px solid #A6A6A6; } } } .el-textarea__inner { width: 80%; } </style>这段代码为什么提交的时候报错，提交不成功
最新发布
11-09
businessOptions.some(item => item.id === businessValue.value)) { ElNotification.warning('请选择有效的业务类型'); return; } ``` ### 二、接口调用问题 1. **参数结构不符合接口要求** ```javascript ...
CSS学习笔记
zzh的博客
01-08 3913
文章目录关于CSSHTML的局限性CSSCSS语法规范CSS样式风格选择器选择器的作用及分类基础选择器标签选择器类选择器多类名id选择器id选择器和类选择器的区别通配符选择器基础选择器总结复合选择器后代选择器（重要）子选择器（重要）并集选择器（重要）伪类选择器链接伪类选择器:focus伪类选择器复合选择器总结CSS引入方式行内样式表（行内式）内部样式表(嵌入式）外部样式表（链接式）字体属性字体系列字体大小字体粗细文字样式字体复合属性字体属性总结CSS文本属性文本颜色对齐文本装饰文本文本缩进行间距emmet语
CSS回顾
qq_46099570的博客
11-25 495
CSS回顾 1.主流浏览器及其内核：（很重要！！！！！） Google chrome                 Webkit/blink IE                  &
JavaScript 获取鼠标坐标
weixin_30332241的博客
11-16 133
网上查阅之后的总结，非原创 要获取发生事件时鼠标的坐标，可以这样写： <div id="demo">点击获取鼠标坐标</div> <script type="text/javascript"> 　　document.getElementById("demo").onclick=function(e){ 　　var eve=e; ...
在js中无法获取多个id值为demo的问题
weixin_38420342的博客
08-14 1046
例如代码中： &lt;script&gt; $(document).ready(function(){ $("#demo").hover(function(){ $("h1").css("background-color","yellow"); },function(){ $("h1").css("background-color",&quo
【easyUI】<div class="demo-info">
jrwykkll的专栏
03-31 1121
Click the right top buttons to perform actions with panel.
几个html代码demo
热门推荐
AI人间的博客
04-13 1万+
divdemo div分区元素 这里放置logo和按钮 Hello. How are you. And you? 盗版必究 htmldemo 模板 menudemo 表单 <!-- form是表单，内部可以包含多个控件， 控件内可以输入值。我们
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值