目录
7.关于某些时候el-table超出内容区后不显示进度条的问题
19.el-select默认显示el-option的某一数据
20.el-dialog标题自定义内容，可以在标题添加按钮等
25.格式化输入el-table的内容，比如，数据只需要小数点后4位
27.快速表头和单元格的居中操作，不必每个写align='center'
1-关于el-table复选框中表头和内容不对齐问题
<el-table
:data="tableData"
stripe
style="width: 100%"
tooltip-effect="dark"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" align="center"> </el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
</el-table>直接添加align="center"解决
2-日期选择器传值给后端格式不对
使用 value-format="yyyy-MM-dd HH:mm:ss"
后端需要什么格式你就在value-format属性中修改
<el-date-picker
class="input-box"
type="datetime"
v-model="ruleForm.birthday"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择出生日期"
>
</el-date-picker>3-获取表格的当前行数据#default="{row}"
不再使用slot-scope="scope"来获取当前行数据
<el-table-column fixed="right" label="操作" width="120">
<template #default="{ row }">
<el-button
@click.native.prevent="deleteRow(row.$index, tableData)"
type="text"
size="small"
>
删除
</el-button>
</template>
</el-table-column>4-一键清空表单数据
1.给<el-form ref=“formdata” :model="formInline">,添加ref绑定dom
2.在<el-form-item prop="time">，添加prop，prop的值是formInline:{time:“”}的time属性
3.给个重置按钮
<el-form-item>
<el-button type="primary" @click="onSubmit()">清空</el-button>
</el-form-item>
4.一键清空表单数据
onSubmit() {
this.$refs.formData.resetFields()
},
5.代码如下
<el-form ref="formData" :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="系统模块" prop="xit">
<el-input
v-model="formInline.xit"
placeholder="请输入系统模块"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit()">清空</el-button>
</el-form-item>
</el-form> onSubmit() {
this.$refs.formData.resetFields()
},6.表格的排列
需求：操作表单的时候，给按钮和表单区域添加空隙
1.如果是有适配要求的可以使用el-row和el-col配合各种屏幕使用
这里只展示不适配固定的只要有间隙就行
---给el-form-item添加label-width配合label实现间隙
label一定要打几个空格，不然不生效哈哈
<el-form-item label-width="100px" label=" ">
<el-button @click="onSubmit">清空</el-button>
<el-button type="primary" plain @click="onSubmit">重置</el-button>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>7.关于某些时候el-table超出内容区后不显示进度条的问题
很多时候都会有这个问题，解决方法就是给el-table设置宽高
这样无论是什么场景，只要是超出了内容区域就会显示进度条啦
<el-table :data="terminalData" style="width: 100%" height="calc(100vh - 60px - 61px - 48px - 30px - 56px - 0.35rem - 55px - 85px)">
<el-table-column prop="date" label="序号" >
</el-table-column></el-table>8.关于el-button只用来跳转路由地址，不传参
平时的写法
<el-button @click="toggle()" type="primary" plain
>切换模式</el-button
>
toggle() {
this.$router.push("/terminalManage/list");
},还有一种写法，直接包含了router-link
<el-button type="primary" plain
><router-link to="/list">切换模式</router-link></el-button
>9-局部插件导入（连写）
直接在components中导入页面所需插件，例如：
components: {
"full-calendar": require("vue-fullcalendar")
},使用，名字对应属性名称
<full-calendar
class="test-fc"
>
<template slot="fc-event-card" slot-scope="f" v-if="isshow">
<p>{{ f.event.title }}</p>
</template>
</full-calendar>10.关于el-tabs进行组件切换的时候闪屏
1-通过v-if来判断就不会闪屏了
给每个子组件都添加v-if就解决了
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="操作日志" name="first">
<operate-log v-if="activeName==='first'"></operate-log>
</el-tab-pane>
<el-tab-pane label="登录日志" name="second">
<Loginlog v-if="activeName==='second'" ></Loginlog>
</el-tab-pane>
</el-tabs>11.el-date-picker超出弹窗内容
在el-date-picker添加 style="max-width: 100%;"解决，会根据弹窗宽度进行自适应操作
<el-form-item label="时间" prop="pass" required>
<!-- style="max-width: 100%;"保证不超出弹窗内容 -->
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="~"
start-placeholder="开始日期"
end-placeholder="结束日期"
style="max-width: 100%;"
>
</el-date-picker>
</el-form-item>
12.使用el-col占位做不同屏幕自适应问题
需求就是不同屏幕使用分为左右结构，但是中间要留位置，使用多el-col来占中间的空白区，不同屏幕下占位份位不一
el-col必须设置 style="border:1px solid transparent;"不然不生效
<el-row class="row-header">
<el-col :xl="5" :lg="8" :md="12">
</el-col>
<!-- 纯占位做自适应 -->
<el-col
style="border:1px solid transparent;"
:xl="12"
:lg="6"
:md="1"
></el-col>
<el-col :xl="6" :lg="10" :md="10">
</el-col>
</el-row>13.vue3中scss穿透失效问题
网上的三种我都试过了，写了就报错，根据提示改了，只有这种可以生效不报错
::v-deep(.el-card__body){
height: 100%;
padding: 0px 30px;
@extend %flex-between;
}14.el-table默认第一行高亮，被选中的状态
给el-tabel绑定ref
<el-table
ref="terminalList"//记得绑定
:data="userTableData"
tooltip-effect="dark"//表格超出后会...显示之后鼠标滑上去会显示内容
style="width: 100%"
height="calc(100vh - 30px - 61px - 48px - 30px - 56px - 0.35rem - 55px - 85px)"
@row-click="userRowClick"//点击当前行后触发
:highlight-current-row="true"//高亮当前行
:show-header="false"//不展示表头
class="user-table-div"
>在获取到表格数据后再进行高亮，写法随意，这边是我自己封装的方法，只要能获取到表格数据就行，主要是看this.$nextTick
async queryList(){
const res=await EquipmentList({
page:this.page,
size:this.size
})
if(res.code==200){
this.totalCount=res.total;
let {data}=res
this.userTableData=data
//默认高亮第一行，this.$nextTick可以当做是定时任务，在有数据后才执行
this.$nextTick(()=>{
this.$refs.terminalList.setCurrentRow(this.terminalList[0])
})
console.log(this.userTableData,'设备列表数据');
}
},15.关于el-table使用fixed后内容错位
操作一列中，fixed=“right”,需要指定宽度 width
与操作列相邻的一列不加width，其他的列指定宽度
16.el-table表格数值过多处理，别再用三元表达式了
使用场景：如果后端要求el-table表格传值之后你做判断你是否会这样写
错误示范：无限嵌套三元表达式，不是不能实现，不利于阅读
<el-table-column
prop="DataType"
label="流量类型"
width="180">
<template #default="{row}">
<span>{{ row.DataType=='singlecard'?'单卡通用流量':row.DataType=='directionalcard'?'单卡定向流量':row.DataType=='sameflowcard'?'同档位池共享流量':row.DataType=='directional sameflowcard'?'同档位池共享定向流量':row.DataType=='unityPayPool'?'统付池通用流量':row.DataType=='GREcard'?'统付池定向流量':'--'}}</span>
</template>
</el-table-column>正确示范
<el-table-column prop="DataType" label="流量类型" width="180">
<template #default="{ row }">
<span>{{ dataTypes[row.DataType] || "--" }}</span>
</template>
</el-table-column>
data(){
return{
dataTypes: {
singlecard: "单卡通用流量",
directionalcard: "单卡定向流量",
sameflowcard: "同档位池共享流量",
directional_sameflowcard: "同档位池共享定向流量",
unityPayPool: "统付池通用流量",
GREcard: "统付池定向流量",
},
}}17.el-form去掉表单验证必填的*号
:hide-required-asterisk="true"，加上这个就没有label前面的*号了
<el-form
ref="inclinometerForm"
:model="inclinometerForm"
:rules="rules"
:hide-required-asterisk="true"
>18.el-form-item，改变label的字体
/deep/ .el-form--inline .el-form-item__label {
font-weight: bold;
color: #000;
}
效果：字体变粗了
19.el-select默认显示el-option的某一数据
这样el-select会默认显示lable值：值2
<el-form-item label="三方：">
<el-select v-model="selectValue">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>options: [
{
value: 1,
label: "值1"
},
{
value: 2,
label: "值2"
},
{
value: 3,
label: "值3"
}
],
selectValue:2
20.el-dialog标题自定义内容，可以在标题添加按钮等
写个内置的插槽title就可以了
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
<div slot="title" class="dialog-title">
<span class="dialog-title-text">外部弹窗</span>
<el-button type="primary">按钮</el-button>
</div>
</el-diglog>效果，可以自定样式
21.el-form-item的label左对齐
::v-deep .el-form-item__label {
text-align: left;
padding: 0px;
}
22.表格根据不同的字段去判断颜色
status就是0 1 2这种纯数字
<el-table-column prop="status" label="申请结果" align="center">
<template #default="{ row }">
<span :style="getStatusColor(row.status)">{{
statusType[row.status] || ""
}}</span>
</template>
</el-table-column> computed: {
getStatusColor() {
return function (status) {
let color = "";
let fontWeight = "400";
if (status === 0) {
color = "rgb(69, 128, 255)";
} else if (status === 1) {
color = "#ec0b39";
} else {
color = "rgb(40, 199, 78)";
}
return { color, fontWeight };
};
},
}, statusType: {
0: "通过",
1: "驳回",
2: "待审批",
},效果：
23.el-table列头添加提示语
使用内置插槽<template #header>的方式添加tooltip
<el-table-column width="150" align="center">
<template #header>
<div style="display: flex; align-items: center">
<span>周期累计流量</span>
<el-tooltip
effect="dark"
content="这是Msisdn字段的描述"
placement="top"
>
<i class="el-icon-question" style="margin-right: 5px"></i>
</el-tooltip>
</div>
</template>
<template #default="{ row }">
<span>{{ row.PeriodAddFlow }}</span>
</template>
</el-table-column>
24.获取package.json的模块信息
import { dependencies, devDependencies } from '../../../../package.json' <tr>
<td>vue</td>
<td>{{ dependencies['vue'] }}</td>
<td>@vue/cli</td>
<td>{{ devDependencies['@vue/cli-service'] }}</td>
</tr>
<tr>
<td>vuex</td>
<td>{{ dependencies['vuex'] }}</td>
<td>vue-router</td>
<td>{{ dependencies['vue-router'] }}</td>
</tr>
<tr>
<td>element-ui</td>
<td>{{ dependencies['element-ui'] }}</td>
<td>axios</td>
<td>{{ dependencies['axios'] }}</td>
</tr>效果：
25.格式化输入el-table的内容，比如，数据只需要小数点后4位
<el-table-column
label="z(m)"
prop="z"
:show-overflow-tooltip="true"
:formatter="formatterTofixed"
></el-table-column> //保留小数位
formatterTofixed(row, column, cellValue, index) {
return parseFloat(cellValue).toFixed(4);
},26.tree只获取最后节点的数据
<el-tree
:data="data"
node-key="id"
draggable
:props="defaultProps"
@node-click="handleNodeClick"
>
<span class="custom-tree-node" slot-scope="{ node, data }">
<span>
<i class="el-icon-folder-opened"></i>
{{ node.label }}</span
>
</span>
</el-tree> // 点击树节点之后触发
handleNodeClick(data, node) {
// console.log(val, "树节点数据");
if (node.isLeaf) {
console.log(node.data, "最后一节的数据");
}
},
27.快速表头和单元格的居中操作，不必每个写align='center'
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }" <el-table
:data="dailyPlanData"
border
style="width:100%; height:100% fontSize:12px;marginTop:50px;"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
></table>28.el-input保证输出的值是数字类型
问题:有些数据回填的时候给的是14,15.7这种数字类型的值,但是等编辑完后变成了字符串的'14','15.7',所以要保证用户输入的时候必须为数字,浮点数也行.
v-model.number="equipSettingForm.MQTTFrequency",保证输入的是数字,但是不能输小数
所以需要结合type='number'使用
<el-input v-model.number="formInline.user" type="number" placeholder="审批人"></el-input>29.el-form行内表单独占一行
需求：在el-dialog弹窗中有点表单项需要独占一行，有的多表单项为一行，我直接css搞定
首先需要把el-form设置为行内表单 :inline="true"
其次给需要独占一行的表单添加个css class="row-form"
<el-form
:inline="true"
:model="formInline"
class="demo-form-inline addform"
label-width="110px"
>
<el-form-item label="模式名称" class="row-form">
<el-input
v-model="formInline.user"
placeholder="审批人"
></el-input>
</el-form-item></el-form>最后添加css样式结束
.row-form {
width: 100%;
::v-deep .el-form-item__content {
width: 81.5%;
}
}效果如下：
模式名称已经独占一行了
30.el-dialog在弹窗外点击不关闭弹窗
添加这俩就行了，除了按x或者取消，其他点击都关闭不了弹窗了
:close-on-click-modal="false"
:close-on-press-escape="false"
<el-dialog
title="新增"
:visible.sync="addOrEditDialog"
width="500px"
:close-on-click-modal="false"
:close-on-press-escape="false"
>31.编辑新增公用一个接口但是传参不同
比如：编辑需要传id，新增不需要传id，其他的值是一样的，可以用一下方法,在提交表单的时候判断下是否有值就行了
async queryList() {
let {name,password,id}=this.table;
const params = {
name,password
};
if (id) {
params.id= id;
}
const res = await EquipmentList(params);}32.判断相同索引之后进行数据的修改或者是高亮展示
const index = data.findIndex((item) => item.id === terminalId);
// 如果找到了匹配的项，index将是该项的索引
// 如果没有找到，index将是-1
if (index !== -1) {
// 你可以将索引存储在一个变量中
const matchedIndex = index;
this.$nextTick(() => {
this.$refs.terminalList.setCurrentRow(
this.userTableData[matchedIndex]
);
});
this.sensorTypeTable(terminalId);
} else {
this.sensorTypeTable(this.rownow.id);
this.$nextTick(() => {
this.$refs.terminalList.setCurrentRow(this.userTableData[0]);
});
}33.el-input设置type="textarea"设置文本域的高度，row值越大文本域越高
<el-input
v-model="formInline.user"
type="textarea"
:rows="4"
placeholder="请输入监测项目"
></el-input>34.传给后端的数据小技巧,但是如果值为'' "那就是有数据了，也会把该数据传给后端
// 只要是undefined的，只要不填到后端就不会穿值为undefined的数据
this.addOrEditPointForm = {
name: undefined, //测点编号
poi_code: undefined, //点号
item_id: undefined, //监测项目id
}35. el-checkbox-group获取选择的值而不是label
如下：遍历后key和label都是value值，但是显示是label，最后勾选得到的还是value的值[1,2]
<el-checkbox-group v-model="domain.checkboxGroup1">
<el-checkbox
v-for="option in observationItems"
:key="option.value"
:label="option.value"
border
>{{ option.label }}</el-checkbox
></el-checkbox-group
> observationItems: [
{ value: "1", label: "张三" },
{ value: "2", label: "李四" },
],
393
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
