1.el-row每行使用标签标识然后每行内的列使用标识至于每列整行的宽度比例则使用:span属性进行设置每行划分为24个分栏。el-rowel-col:span12el-form-itemlabel姓名propnameel-inputv-modelform.namedisabledplaceholder请输入姓名//el-form-item/el-colel-col:span12el-form-itemlabel电话proptelel-inputv-modelform.teldisabledplaceholder请输入电话//el-form-item/el-col/el-row:gutter设置分栏之间的距离注需要在分栏里面新增元素才能实现分栏间隔el-col中新增了el-form-item元素el-row:gutter90el-col:span12el-form-itemlabel姓名propnameel-inputv-modelform.name1disabledplaceholder请输入姓名//el-form-item/el-colel-col:span12el-form-itemlabel电话proptelel-inputv-modelform.tel1disabledplaceholder请输入电话//el-form-item/el-col/el-row2.父组件直接获取子组件的属性值父组件el-form-itemlabel内容QlEditor v-modelform.contentrefqlEditorRef:min-height192//el-form-itemscript/** 提交按钮 */submitForm(){this.$refs[form].validate(valid{this.form.contentthis.$refs.qlEditorRef.content;});},/script子组件templatedivquill-editorclasseditorv-modelcontent/quill-editor/div/templatescriptdata(){return{content:,}}script3.toLocaleString函数的使用将数字用逗号分隔数组处理日期处理https://blog.csdn.net/lyx1838102537/article/details/1305746904.el-descriptions 详情页官网https://element.eleme.cn/#/zh-CN/component/descriptions(1)基本用法el-dialogtitle详情:visible.syncdetailOpenwidth900pxappend-to-bodyel-descriptionsstylemargin-top: -20px;title:column2border label-stylewidth:20%;text-align:center;font-weight:600content-stylewidth:260px;width:30%;el-descriptions-itemlabel产品封面image-previewstylewidth: 100px;height: 100px:srcform.productCoverUrl//el-descriptions-itemel-descriptions-itemlabel订单号{{form.sn}}/el-descriptions-itemel-descriptions-itemlabel产品id{{form.productId}}/el-descriptions-itemel-descriptions-itemlabel产品名{{form.productName}}/el-descriptions-itemel-descriptions-itemlabel产品简介{{form.productBriefIntroduction}}/el-descriptions-itemel-descriptions-itemlabel产品类型dict-tag :optionsdict.type.product_type:valueform.productType//el-descriptions-itemel-descriptions-itemlabel产品困难等级dict-tag :optionsdict.type.product_difficulty_level:valueform.productDifficultyLevel//el-descriptions-itemel-descriptions-itemlabel用户id{{form.userId}}/el-descriptions-itemel-descriptions-itemlabel配送方式dict-tag :optionsdict.type.product_order_delivery_way:valueform.deliveryWay//el-descriptions-itemel-descriptions-itemlabel收获人{{form.address}}/el-descriptions-itemel-descriptions-itemlabel收获人电话{{form.address}}/el-descriptions-itemel-descriptions-itemlabel收获地址{{form.address}}/el-descriptions-itemel-descriptions-itemlabel下单数量{{form.num}}/el-descriptions-itemel-descriptions-itemlabel单价/售价{{form.price}}/el-descriptions-itemel-descriptions-itemlabel订单金额{{form.orderPrice}}/el-descriptions-itemel-descriptions-itemlabel支付方式dict-tag :optionsdict.type.product_order_pay_way:valueform.payWay//el-descriptions-itemel-descriptions-itemlabel支付时间{{parseTime(form.payTime)}}/el-descriptions-itemel-descriptions-itemlabel下单时间{{parseTime(form.createTime)}}/el-descriptions-itemel-descriptions-itemlabel取消时间{{parseTime(form.cancelTime)}}/el-descriptions-itemel-descriptions-itemlabel备注{{form.remark}}/el-descriptions-itemel-descriptions-itemlabel发货时间{{parseTime(form.fhTime)}}/el-descriptions-itemel-descriptions-itemlabel发货备注{{form.fhRemark}}/el-descriptions-item/el-descriptionsdivslotfooterclassdialog-footerstylemargin-top: -20pxel-button clickcancel关 闭/el-button/div/el-dialog1一行只显示一列使用spanel-descriptions-itemlabel开始时间{{ parseTime(form.beginTime) }}/el-descriptions-itemel-descriptions-itemlabel结束时间{{ parseTime(form.endTime) }}/el-descriptions-itemel-descriptions-itemlabel备注:span2{{form.remark}}/el-descriptions-itemel-descriptions-itemlabel合约信息:span2editorv-modelform.contractInfo:min-height192:read-onlytrue//el-descriptions-item/el-descriptions5.js 获取 list 对象属性值返回一个新的属性值数组letlist[{id:1,name:Item 1},{id:2,name:Item 2}];letnameslist.map(itemitem.name);// 创建一个包含所有name属性的新数组console.log(names);// [Item 1, Item 2]6.多选修改使用$set刷新视图$set:是一个用于向响应式对象添加属性的实例方法它能够确保新添加的属性也是响应式的从而触发视图更新/** 修改按钮操作 */handleUpdate(row){this.reset();constuserIdrow.userId||this.ids;getUser(userId).then(response{this.formresponse.data;this.form.divisionCodehandleCode(this.form.divisionCode);this.postOptionsresponse.posts;this.roleOptionsresponse.roles;this.$set(this.form,postIds,response.postIds);this.$set(this.form,roleIds,response.roleIds);this.opentrue;this.title修改用户;this.form.password;});},7.vue table empty-text 字体颜色在Vue中如果你使用的是Element UI库并且想要设置空表格时的empty-text的字体颜色你可以通过CSS来实现。首先你需要给空表格的文本添加一个类名这样可以更容易地为其指定样式。你可以通过empty-text属性来自定义空文本并给其添加一个类名比如empty-text-custom。el-table:datatableDataempty-text没有数据classempty-table!-- 你的表格列 --/el-tablestyle.empty-table .el-table__empty-text{color:red;/* 设置你想要的颜色 */}/style8.JS 同时验证字母数字特殊字符的正则表达式JS 同时验证字母数字特殊字符的正则表达式9.table高度固定公共js及使用ruoyi后端使用笔记中 第35项10.查找table列设置的宽度位置