1、 点击返回跳转到上一页面
①直接写在按钮定义上
<el-button @click="$router.go(-1)">返回</el-button>②也可以单独定义在一个方法中，要加 this
// 定义返回上一页的方法
goBack() {
this.$router.go(-1);
}
2、el-table表格列下面设置选择框或者输入框时， v-model要绑定一行数据，而不是随便绑定一个值，否则无法进行编辑和删除操作
在表格的列中使用输入框<el-input>需要正确绑定数据,才能实现双向绑定和输入。
这里有几点需要注意:
- <el-input>需要绑定当前行数据,而不是一个独立的数据input1。
- 需要使用scope.row来获取当前行数据。
- prop属性表示列对应的数据字段。
<el-table-column label="角色名称" prop="role_name">
<template slot-scope="scope">
<el-input v-model="scope.row.role_name"></el-input>
</template>
</el-table-column> 
3、日期选择格式化
当输入框或选择框无法修改删除文字时，可能是没有在data中定义字段，
选择日期格式化：value-format="yyyy-MM-dd"
<el-form-item label="终止日期" prop="end_date" required >
<el-date-picker
v-model="form.end_date"
type="date"
placeholder="选择终止日期"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="名称" prop="name" >
<el-input v-model="form.name" placeholder="请输入名称" />
</el-form-item>4、当样式在网页中修改有效，在代码里修改不生效，试着在你要修改的类前加上 /deep/
5、数字转换为文字显示
①当选择器获取从上个页面的值是数字时，如何显示为文字，且又不改变值，仍然保持为数字
可以在data中添加映射表
<el-form-item label="基准级别" prop="basic_grade" >
<el-select v-model="form.basic_grade" placeholder="请选择">
<el-option
v-for="(label, value) in basicGradeOptions"
:key="value"
:label="label"
:value="value">
</el-option>
</el-select>
</el-form-item>
data() {
return {
basicGradeOptions: {
1: '否',
2: '是'
}
}
}②如果是Input输入框值想显示为文字，可直接使用swift,case
<el-form-item label="是否吸烟">
<el-input v-model="form.tabacco"/>
</el-form-item>
created() {
this.setFormData()
},
setFormData() {
// 复制 prospectusData 到 form
this.form = { ...this.prospectusData };
//是否吸烟
switch (this.form.tabacco) {
case 0:
this.form.tabacco = '不吸烟';
break;
case 1:
this.form.tabacco = '吸烟';
break;
}
}如何将JSON字符串转为 JavaScript 对象
其中这里storedData 被解析前是一个 JSON 字符串（打印1111后面所示），你需要先将其通过 JSON.parse（） 解析为 JavaScript 对象（打印2222后面所示）
record(){
const storedData = localStorage.getItem('prospectusDetail');
console.log(111111,storedData)
if (storedData) {
// 解析 JSON 字符串
this.prospectusData = JSON.parse(storedData);
console.log(22222,this.prospectusData)
}
this.form=this.prospectusData
},6、输入框尾部图标
在 Element UI 中,<i> 标签与 slot="suffix" 一起使用,可以实现在输入框尾部添加图标或自定义内容的效果。
<el-input>
<i slot="suffix">图标</i>
</el-input> 
7、Number() 函数可以将字符串参数解析成数字
8、用或运算符可以代替三元表达式更简洁，当前面一项有值就取前面一项，否则取后面一项
this.commission_one_name=res.sale.user_name||''9、这样的表格，<tr>是一行，<td>是一列
<table class="nom-tbl">
<tr>
<td class="ltc">首年保費</td>
<td class="rtc">{{ first_year_premium }}</td>
<td class="ltc">冷靜期結束日</td>
<td class="rtc">{{ cool_end_data }} 24時</td>
</tr>
<tr>
<td class="ltc">首年佣金</td>
<td class="rtc">{{ first_year_commission }}</td>
<td class="ltc">本單縂收入（{{ years }}年）</td>
<td class="rtc">{{ total_revenue }}</td>
</tr>
<tr>
<td class="ltc">首年結佣日</td>
<td class="rtc">{{ first_year_payment_day }}</td>
<td class="ltc">佣金級別</td>
<td class="rtc">{{ commission_level }}</td>
</tr>
</table>10、el-divider是Element Plus中用于区隔内容的分隔线组件。
el-divider提供了以下几个常用属性:
- direction - 设置分割线方向,可选horizontal(默认)或vertical
- content-position - 设置内容位置,可选left、right或center
<!-- 垂直分割线 -->
<el-divider direction="vertical"></el-divider>
<!-- 水平分割线,文字居中 -->
<el-divider content-position="center">文字内容</el-divider>11、ref的定义和使用
- 定义
在标签上定义 ref 属性,值可以是字符串或函数:
<!-- string -->
<div ref="myRef"></div>
<!-- function -->
<div :ref="setRef"></div>2、使用
通过 this.$refs 访问:
// 字符串ref
this.$refs.myRef
// 函数ref
this.$refs.setRef()12、Object.keys()是JavaScript中的一个静态方法,用于获取对象自身所有的键,返回一个数组。
基本语法如下:
Object.keys(obj)const obj = {
name: 'John',
age: 20,
gender: 'male'
}
const keys = Object.keys(obj)
console.log(keys) // ['name', 'age', 'gender']13、表格列数字转文字显示
方法一：在接口中通过switch转换，如果不显示就用 this.$set()
res.data.list.forEach((key,index)=>{
let num=key.sex
let sexText
switch (num) {
case 0:
sexText='女'
break;
case 1:
sexText='男'
break;
}
this.$set(key, 'sexText', sexText)
})方法二：使用elementUI自定义列表模板，搭配三元表达式
<el-table-column label="性别" align="center" prop="sexText">
<template slot-scope="scope">
<span>{{ scope.row.sex==1?'男':'女' }}</span>
</template>
</el-table-column>14、深拷贝
点击编辑按钮弹框，要使数据回显可以使用深拷贝方法 JSON.parse(JSON.stringify(item))
正确写法：
toDetail(item){
this.form=JSON.parse(JSON.stringify(item))
},错误写法：
toDetail(item) {
this.form = item
}上面代码中,this.form 和 item 会通过引用方式绑定,它们对应的是同一个对象。
所以如果直接this.form = item,当item变化时,this.form也会变化。
这在很多情况下不是我们想要的结果,通常我们需要form是item的一个拷贝版yi
15、table表头设置颜色
<el-table :data="tableData" :header-cell-style="{background:'#f4f7fb'}">
<el-table-column label="姓名" align="center" prop="name"></el-table-column>
</el-table>16、分页 el-pagination
默认情况下每页显示10条数据，也可以自定义显示条数，如下定义每页显示一条数据，同时data中需要定义page_size=1
:page-sizes="[1, 2, 3, 4]"同时这两个方法下面需要调用获取该列表数据的接口
@size-change="handleSizeChange"
@current-change="handleCurrentChange"17、子组件向父组件传递值
如下为子组件，通过 this.$emit 将res值赋值到getRowData中
如下为父组件部分，还需定义一个同名方法来接受该值
18、localstorage
//存储
localStorage.setItem('key',value)
//读取
localStorage.getItem('key')
//移除
localStorage.removeItem('key')19、MessageBox弹窗
常用于点击删除时的确认
- then() 方法中调用了 deleteQuotationSheet() 方法,会在用户点击确认后执行删除操作。
- catch() 方法在用户点击取消时会执行,通常用来处理取消的逻辑。
//删除采购表
toDelete(){
this.$confirm('此操作将永久删除该采购表 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.deleteQuotationSheet()
}).catch(()=>{
console.log("傻蛋取消干嘛")
})
},20、computed里面的方法如何调用
export default {
mounted() {
console.log(this.getName)
},
computed: {
getName() {
return this.$store.state.name
}
}
}之所以报错“this.getName is not a function”,是因为:
- getName 被定义为一个计算属性,计算属性的本质是一个方法。
- 但是计算属性在使用的时候,是通过它的属性访问器 this.getName 来使用的,而不是通过方法的方式 this.getName() 调用。
在mounted中,通过this.getName来读取计算属性,不要写成函数的调用形式。
21、如何获取以下形式的索引值
<el-table-column type="index"> </el-table-column>通过打印scope的内容，如下scope.$index 就可以获取索引
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="toRemove(scope)">移除</el-button>
</template>
toRemove(item){
let index=item.$index
this.tableData.splice(index, 1)
},22、跳转时在url网址中拼接参数
①（如下使用 '_' 拼接）
this.$router.push({path: `/commission/editQtCommission/${item.grade_id}_${item.quarter_id}`});而后再通过分解的方式获得各个参数
//分解id
let parts = this.id.split("_");
this.xxx=parts[0]
this.yyy=parts[1]②使用query
toEdit(item) {
const { policy_id, name, policy_number, status, sale_name } = item; // 解构 item 对象
this.$router.push({
path: `/guarantee/edit`,
query: {
id: policy_id,
holder_name: name,
policy_number: policy_number,
status: status,
sale_name: sale_name,
page: this.page, // 动态绑定 page
page_size:this.page_size // 动态绑定 page_size
}
});
},可以通过 this.$route.query 在跳转的详情页获取这些参数
打印结果如下：
③清除url参数：
this.$router.replace({ query: {} }) 23、接口返回图片网址，如何在前端显示为图片
<el-table-column label="文章海报" align="center">
<template slot-scope="scope">
<img :src="scope.row.image" alt="文章海报" style="width: 100px; height: auto;">
</template>
</el-table-column>在这个示例中，src属性的值是接口返回的图片网址，alt属性用于指定图片的替代文本。将这个<img>标签插入到你的HTML代码中的适当位置，浏览器就会加载并显示图片。
24、当数据太多可以设置滚动，可以在 el-table 组件上使用 max-height 属性来设置表格的最大高度，从而在数据超过一定条数时出现滚动条
<el-table
:data="channel_user_all"
@selection-change="selectionLineChangeHandle"
border
size="mini"
max-height="370px"
>
25、disabled的使用
:disabled 属性并不适用于<el-table-column>，它适用于表单元素和可交互的组件，用于设置是否禁用该元素。对于<el-table-column>，您可以使用v-if或者v-show指令来动态控制列的显示与隐藏。
比如：
//v-if
<el-table-column v-if="someCondition" label="销售经理" align="center" prop="manager"/>
//v-show
<el-table-column v-show="someCondition" label="销售经理" align="center" prop="manager"/>
26、readonly 属性和 disabled 属性区别
<el-form-item label="计划书ID" >
<el-input v-model="form.id" :disabled="true"/>
</el-form-item>
<el-form-item label="保险公司" >
<el-input v-model="form.company_name" readonly/>
</el-form-item>readonly 使输入框只读，不可编辑，但保留原样外观
27、使用 el-backtop 返回顶部
<div class="commission" id="commission">
<div style="margin: 20px 20px 20px 5px;font-weight: bold;" >配置各产品的渠道佣金率</div>
<div ref="bo">
<commission-table @update:height="handleHeightChange" />
</div>
<el-backtop target=".commission" :visibility-height="200" />
</div><style scoped>
.commission{
height: 100vh; /* 设置为视口高度 */
overflow-y: auto; /* 使其可滚动 */
position: relative;
}
我的理解是在你想要设置滚动出现按钮的最外层大盒子，也就是最外层第一个div里加上 el-backtop，同时最外层要设置一个类选择器，二者要同名
28、当布尔值进行等号判断的时候，可以采用两种方法：
① 使用两个等于号；且要带双引号 if(this.limit_by_user == "true")
②使用三个等于号 if(this.limit_by_user === true)
原因是:
- 当使用
==进行非严格相等比较时,JavaScript 会自动进行类型转换。 - 对于
if (this.limit_by_user == "true")这个条件判断:- 如果
this.limit_by_user的值是布尔值true,它会被隐式转换为字符串"true" - 然后进行字符串与字符串的比较
"true" == "true" - 由于两个字符串值相同,判断结果为
true
- 如果
- 而之前的问题是因为
if (this.limit_by_user == true):this.limit_by_user的值是布尔值false- 它会先被转换为数字
0 - 然后与数字
1(true被转换为1) 进行比较 - 虽然
0 == 1的结果为false - 但
false在条件判断中被视为 "truthy"值,导致代码块被执行
29.渲染表格的文件显示
即后端返回文件url地址，但是前端却显示文件样式，并且点击该图片可以在浏览器打开或者下载
<el-table-column label="續保文件" align="center">
<template slot-scope="scope" v-if="scope.row.file_url">
<a :href="getFileUrl(scope.row.file_url)" target="_blank" class="file-link" @click.prevent="handleFileClick(scope.row.file_url)">
<img :src="getIcon(scope.row.file_url)" :alt="getFileType(scope.row.file_url)" class="file-icon" />
{{ getFileDescription(scope.row.file_url) }}
</a>
</template>
</el-table-column>
- 通过
slot-scope="scope"获取每一行的数据（scope.row.file_url是文件的 URL）。 - 如果文件 URL 存在，显示一个
<a>标签，点击时触发handleFileClick方法，同时阻止默认的超链接跳转行为（@click.prevent）。 - 超链接中包含一个图标（
<img>标签），图标的src由getIcon方法计算，alt由getFileType方法计算（当图像无法加载时（例如，网络问题或图像 URL 错误），浏览器会显示alt文本内容）。 - 在图标旁边显示文件的描述，由
getFileDescription方法计算。
2. getFileType 方法 （这里用来当图片无法加载时就显示下面这些文字）
getFileType(url) {
const ext = url.split('.').pop().toLowerCase();
switch (ext) {
case 'jpg':
case 'jpeg':
case 'png':
return 'image';
case 'txt':
return 'text';
case 'doc':
return 'doc';
case 'docx':
return 'docx';
default:
return 'file';
}
},url.split('.') ：将 url 按照 .（点号）分割成一个数组
例如，如果 url 是 "example.com/file.txt"，那么 split('.') 会产生 ["example", "com/file", "txt"] 这个数组。
.pop() ：用于移除并返回数组中的最后一个元素
继续上面的例子，pop() 会返回 "txt"，因为这是数组 ["example", "com/file", "txt"] 中的最后一个元素。
.toLowerCase() :用于将字符串中的所有字母转换为小写字母
3. getIcon 方法
这里可以看到不同的格式对应不同的图片，我现在暂时是将图片上传到阿里云获取的图片Url
getIcon(url) {
const ext = url.split('.').pop().toLowerCase();
switch (ext) {
case 'jpg':
case 'jpeg':
case 'png':
return 'http://jwmqcbucket.oss-cn-shenzhen.aliyuncs.com/attachments/runcheng/production/202409/fipNtC_1725606990600.png';
case 'txt':
return 'http://jwmqcbucket.oss-cn-shenzhen.aliyuncs.com/attachments/runcheng/production/202409/bfm4Jn_1725606827133.png';
case 'pdf':
return 'http://jwmqcbucket.oss-cn-shenzhen.aliyuncs.com/attachments/runcheng/production/202409/RB7hz7_1725606759281.png';
default:
return 'http://jwmqcbucket.oss-cn-shenzhen.aliyuncs.com/attachments/runcheng/production/202409/bkQBK6_1725608143660.png';
}
},
4. getFileDescription 方法
getFileDescription(url) {
const ext = url.split('.').pop().toLowerCase();
switch (ext) {
case 'jpg':
case 'jpeg':
case 'png':
return 'image';
case 'txt':
return 'txt';
case 'pdf':
return 'pdf';
case 'doc':
return 'doc';
case 'docx':
return 'docx';
default:
return 'file';
}
},
注意，txt文件用浏览器打开会出现乱码情况，处理如下：
5. handleFileClick 方法
handleFileClick(url) {
const fileType = this.getFileType(url);
if (fileType === 'text') {
// 如果是txt文件，使用fetch API获取文件内容并在新窗口显示
fetch(url)
.then(response => response.text())
.then(data => {
const newWindow = window.open("", "_blank");
newWindow.document.write("<pre>" + data + "</pre>");
newWindow.document.close();
})
.catch(error => console.error('Error fetching the file:', error));
} else {
// 其他文件类型正常打开
window.open(url, "_blank");
}
},
扫一扫
1290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
