企业官网建设流程全解析

1.el-row

每行使用标签标识，然后每行内的列使用标识，至于每列整行的宽度比例，则使用:span属性进行设置，每行划分为24个分栏。

<el-row><el-col:span="12"><el-form-itemlabel="姓名"prop="name"><el-inputv-model="form.name"disabledplaceholder="请输入姓名"/></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="电话"prop="tel"><el-inputv-model="form.tel"disabledplaceholder="请输入电话"/></el-form-item></el-col></el-row>

:gutter设置分栏之间的距离，注：需要在分栏里面新增元素，才能实现分栏间隔
el-col中新增了el-form-item元素

<el-row:gutter="90"><el-col:span="12"><el-form-itemlabel="姓名"prop="name"><el-inputv-model="form.name1"disabledplaceholder="请输入姓名"/></el-form-item></el-col><el-col:span="12"><el-form-itemlabel="电话"prop="tel"><el-inputv-model="form.tel1"disabledplaceholder="请输入电话"/></el-form-item></el-col></el-row>

2.父组件直接获取子组件的属性值

父组件

<el-form-itemlabel="内容"><QlEditor v-model="form.content"ref="qlEditorRef":min-height="192"/></el-form-item><script>/** 提交按钮 */submitForm(){this.$refs["form"].validate(valid=>{this.form.content=this.$refs.qlEditorRef.content;});},</script>

子组件

<template><div><quill-editorclass="editor"v-model="content"></quill-editor></div></template><script>data(){return{content:'',}}<script>

3.toLocaleString函数的使用，将数字用逗号分隔，数组处理，日期处理

https://blog.csdn.net/lyx1838102537/article/details/130574690

4.el-descriptions 详情页

官网：https://element.eleme.cn/#/zh-CN/component/descriptions

(1)基本用法

<el-dialogtitle="详情":visible.sync="detailOpen"width="900px"append-to-body><el-descriptionsstyle="margin-top: -20px;"title="":column="2"border label-style="width:20%;text-align:center;font-weight:600"content-style="width:260px;width:30%;"><el-descriptions-itemlabel="产品封面"><image-previewstyle="width: 100px;height: 100px":src="form.productCoverUrl"/></el-descriptions-item><el-descriptions-itemlabel="订单号">{{form.sn}}</el-descriptions-item><el-descriptions-itemlabel="产品id">{{form.productId}}</el-descriptions-item><el-descriptions-itemlabel="产品名">{{form.productName}}</el-descriptions-item><el-descriptions-itemlabel="产品简介">{{form.productBriefIntroduction}}</el-descriptions-item><el-descriptions-itemlabel="产品类型"><dict-tag :options="dict.type.product_type":value="form.productType"/></el-descriptions-item><el-descriptions-itemlabel="产品困难等级"><dict-tag :options="dict.type.product_difficulty_level":value="form.productDifficultyLevel"/></el-descriptions-item><el-descriptions-itemlabel="用户id">{{form.userId}}</el-descriptions-item><el-descriptions-itemlabel="配送方式"><dict-tag :options="dict.type.product_order_delivery_way":value="form.deliveryWay"/></el-descriptions-item><el-descriptions-itemlabel="收获人">{{form.address}}</el-descriptions-item><el-descriptions-itemlabel="收获人电话">{{form.address}}</el-descriptions-item><el-descriptions-itemlabel="收获地址">{{form.address}}</el-descriptions-item><el-descriptions-itemlabel="下单数量">{{form.num}}</el-descriptions-item><el-descriptions-itemlabel="单价/售价">{{form.price}}</el-descriptions-item><el-descriptions-itemlabel="订单金额">{{form.orderPrice}}</el-descriptions-item><el-descriptions-itemlabel="支付方式"><dict-tag :options="dict.type.product_order_pay_way":value="form.payWay"/></el-descriptions-item><el-descriptions-itemlabel="支付时间">{{parseTime(form.payTime)}}</el-descriptions-item><el-descriptions-itemlabel="下单时间">{{parseTime(form.createTime)}}</el-descriptions-item><el-descriptions-itemlabel="取消时间">{{parseTime(form.cancelTime)}}</el-descriptions-item><el-descriptions-itemlabel="备注">{{form.remark}}</el-descriptions-item><el-descriptions-itemlabel="发货时间">{{parseTime(form.fhTime)}}</el-descriptions-item><el-descriptions-itemlabel="发货备注">{{form.fhRemark}}</el-descriptions-item></el-descriptions><divslot="footer"class="dialog-footer"style="margin-top: -20px"><el-button @click="cancel">关 闭</el-button></div></el-dialog>

（1）一行只显示一列，使用span

<el-descriptions-itemlabel="开始时间">{{ parseTime(form.beginTime) }}</el-descriptions-item><el-descriptions-itemlabel="结束时间">{{ parseTime(form.endTime) }}</el-descriptions-item><el-descriptions-itemlabel="备注":span="2">{{form.remark}}</el-descriptions-item><el-descriptions-itemlabel="合约信息":span="2"><editorv-model="form.contractInfo":min-height="192":read-only="true"/></el-descriptions-item></el-descriptions>

5.js 获取 list 对象属性值，返回一个新的属性值数组

letlist=[{id:1,name:'Item 1'},{id:2,name:'Item 2'}];letnames=list.map(item=>item.name);// 创建一个包含所有name属性的新数组console.log(names);// ['Item 1', 'Item 2']

6.多选修改使用$set刷新视图

$set:是一个用于向响应式对象添加属性的实例方法，它能够确保新添加的属性也是响应式的，从而触发视图更新

/** 修改按钮操作 */handleUpdate(row){this.reset();constuserId=row.userId||this.ids;getUser(userId).then(response=>{this.form=response.data;this.form.divisionCode=handleCode(this.form.divisionCode);this.postOptions=response.posts;this.roleOptions=response.roles;this.$set(this.form,"postIds",response.postIds);this.$set(this.form,"roleIds",response.roleIds);this.open=true;this.title="修改用户";this.form.password="";});},

7.vue table empty-text 字体颜色

在Vue中，如果你使用的是Element UI库，并且想要设置空表格时的empty-text的字体颜色，你可以通过CSS来实现。

首先，你需要给空表格的文本添加一个类名，这样可以更容易地为其指定样式。你可以通过empty-text属性来自定义空文本，并给其添加一个类名，比如empty-text-custom。

<el-table:data="tableData"empty-text="没有数据"class="empty-table"><!-- 你的表格列 --></el-table><style>.empty-table .el-table__empty-text{color:red;/* 设置你想要的颜色 */}</style>

8.JS 同时验证字母数字特殊字符的正则表达式

JS 同时验证字母数字特殊字符的正则表达式

9.table高度固定公共js及使用

ruoyi后端使用笔记中 第35项

10.查找table列设置的宽度位置