时间戳，分页，截取字符串，父子组件之间传值和调动
时间戳，分页，截取字符串，父子组件之间传值和调动
- 1.获取选中日期的时间戳
- 2.查询按钮下面，需要添加 ,页码重置
- 3.万能的添加分页
- 4.findIndex查找对应的索引值
- 5.三元表达式花样用法
- 6.怎么让el-input框里面带有固定的字，不是placeholder这个属性
- 7.截取字符串，`Date.substring(0,10)`
- 8.让列表里面的数据居中`align="center"`
- 9.添加插槽（vue）
- 10.label根据情况变化
- 11.子组件调用 ·父组件的方法·
- 12.父组件调用 ·子组件的方法·
- 13.父组件向子组件传值
- 14.子组件向父组件传值
- 15.路由退回,返回上一级
- 16.element-ui获取半选状态下父节点
- 17.编辑表单得时候，可能根据id匹配不到name
- 18.表格 -文字超出省略号显示，鼠标经过文字浮窗显示
- 19.表格 -文字超出省略号显示，鼠标经过文字浮窗显示，修改浮窗样式
- 20.在表单上熟练使用三元表达式
- 21.调用后端接口进行排序
- 22.日期的选择范围，
-
- 22.1当前日期的前20年
- 22.2 日期两年内可选
- 23. 给列表添加必填标志（自定义表头）
- 24 . el-table错行显示问题
- 25.获取当前页的路由
- 26.点击树的事件加自定义出传参
- 27.新增页面-查看功能（颜色太暗-调亮）
- 28.判断对象中是否存在哪个属性 in
- 29.将两个对象整合成一个
- 30.删除数组中选中的那项
- 31.前端自定义的列表添加和删除
- 32.实现rule的嵌套
- 33.el-table-column将列表中的id通过list转换成对应的中文名称
- 34.parseTime获取格式化后的时间
- 35.el-table-选择列表数据
- 36.el-row错乱
- 37 this.$forceUpdate() 强制组件渲染。
- 38 js中“??“和“?.“怎么用？
-
- 38.1 ？？：空值合并操作符
- 38.2 ?. 可选链运算符
1.获取选中日期的时间戳
<el-date-picker
style="width:400px;"
v-model="Date"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
@change="dataChange">
</el-date-picker>
methods: {
dataChange(val) {
console.log("开始的时间戳", val, new Date(val).getTime());
//year : new Date().getFullYear(),
//month : new Date().getMonth() + 1,
//getDate : new Date().getDate(),
},
}
if (new Date(this.addForm.closeDate) < new Date(this.addForm.startDate)) {
this.$message.error("开始时间不能晚于截止时间时间");
return;
}
var cycleEndDate=new Date().getFullYear() + "-" +(new Date().getMonth() + 1) +"-" +new Date().getDate()
console.log(cycleEndDate);//2021-08-04
2.查询按钮下面，需要添加 ,页码重置
例如：
this.currentPage=1
this.total = 1 //共几条数据
this.currentPage = 1 //当前页数
this.pageSize = 10 //每页显示条目个数
3.万能的添加分页
<el-pagination
class="table-pagination"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
data() {
return {
// 表格和分页
total: 1, //共几条数据
currentPage: 1, //当前页数
pageSize: 10, //每页显示条目个数
}
},
// 分页控制
handleCurrentChange(val) {
// 页数赋值
this.currentPage = val
// 重新载入
this.Listdata()
},
handleSizeChange(val) {
this.pageSize = val
this.currentPage = 1
// 重新载入
this.Listdata()
},
4.findIndex查找对应的索引值
let list= ['1', '2', '3', '4', '5', '6', '7', '8']
var mobilePhone = list.findIndex(value => value == "5");//list数组中寻找“5”，返回相应的索引值，找不到返回-1
console.log('mobilePhone', mobilePhone);//4
5.三元表达式花样用法
type=='province' ? this.provinceOptions = resData.data : type=='city'? this.cityOptions = resData.data:this.districtOptions=resData.data
<el-form-item :label="contractType=='1'?'添加商场名称':'修改商场名称'" prop="customer">
</el-form-item>
<el-table-column prop="Status" label="审批状态">
<template slot-scope="scope">
<span>{{scope.row.Status==1?'已审批':scope.row.Status==2?'未审批':'-'}}</span>
<!-- <span>{{scope.row.Status}}</span> -->
</template>
</el-table-column>
6.怎么让el-input框里面带有固定的字，不是placeholder这个属性
<el-input v-model="money" placeholder="输入金额">
<span slot="suffix" style="margin-right:20px;">元</span>
</el-input>
7.截取字符串，Date.substring(0,10)
截取0到10区间的部分，包含0，不包含10
<el-table-column prop="Time" label="上传时间" align="center">
<template slot-scope="scope">
<span>{{scope.row.Time?scope.row.Time.substring(0,10)}:""}</span>
<span>{{scope.row.Time?scope.row.Time.substring(11,16):""}}</span>
</template>
</el-table-column>
(Number(this.Value)/10000).toFixed(2)
8.让列表里面的数据居中align="center"
<el-table-column prop="Role" label="角色" align="center"></el-table-column>
<el-table-column prop="Role" label="角色" align="center"/>
9.添加插槽（vue）
<el-table-column prop="Role" label="角色" align="center">
<template slot-scope="scope">
<span>{{scope.row.Role==null?'-':scope.row.Role}}</span>
<!-- <span>{{scope.row.Role}}</span> -->
</template>
</el-table-column>
10.label根据情况变化
<el-table-column prop="customer" :label="this.activeName=='credit'?'客户花费金额':'供应商花费金额'" align="center">
<template slot-scope="scope">
<div style="color: #0079fe;cursor: pointer;" @click="DetailsPage(scope.row)">{{scope.row.customer}}</div>
</template>
</el-table-column>
11.子组件调用 ·父组件的方法·
//儿子
toBusinessOpportunityDetailsPage(row) {
this.$emit('toBusinessDetails')
//this.$emit('fathervoid', false); false是传参
},
//父亲 @toBusinessDetails="toBusinessDetails"
<credit-and-payment @toBusinessDetails="toBusinessDetails" :active-name="activeName" :business-information="data"/>
//方法
import creditAndPayment from "./components/creditAndPayment.vue";
export default {
name:'businessDetails',
data(){
return{
activeName:'businessDetail',
}
},
components:{creditAndPayment},
created(){},
mounted(){},
methods:{
toBusinessDetails(){
this.activeName = 'businessDetail'
},
}
}
12.父组件调用 ·子组件的方法·
ref=“rightPageEchartOneDetails”
this.$refs.rightPageEchartOneDetails.reset(‘formInline’)
//父亲
<credit-and-payment ref="OneDetails" :activeName="activeName" :businessInformation="data" @click="clickrest/>
clickrest(){
this.$refs.OneDetails.toBusinessDetails('formInline')//formInline是传参，toBusinessDetails子组件的方法
},
//子组件toBusinessDetails方法
toBusinessDetails(line){
console.log(line);//最后会打印出formInline
}
13.父组件向子组件传值
//父组件
<right-page-echart-three :id="id" :key="id"></right-page-echart-three>
import rightPageEchartThreefrom "./rightPageEchartThree.vue";
export default {
name: "rightPage",
// import引入的组件需要注入到对象中才能使用
components: {
rightPageEchartThree,
},
}
props: ['activeName', 'businessInformation'],
props: { id: { type: String, default: null, }, },
//子组件
export default {
name: "rightPageEchartOne",
// import引入的组件需要注入到对象中才能使用
components: {
echarts,rightPageEchartOneDetails
},
props: {
id: {
type: String,
default: null,
},
},
data() {
// 这里存放数据
return {
d: "3",
};
},
watch: {
id: {
deep: true, // deep: true // 可以深度检测到 test 对象的属性值的变化
handler(value) {
this.d = value;
// console.log("value11111111111", value);
},
},
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
if (this.id) {
this.d = this.id;
// console.log("this.d11mounted", this.d);
}
},
mounted() {
//接收this.caseTrend对象
if(Object.keys(this.caseTrend).length>0){
this.caseTrendChange =this.caseTrend
}
},
14.子组件向父组件传值
//父组件
<right-page @message="message"></right-page>
message(res){
console.log('res111111111111111111',res);
this.id=res
}
//子组件
mounted() {
this.$emit('message',this.id)
},
15.路由退回,返回上一级
<button @click="goback">goback</button>
methods:{
goback(){}
this.$router.go(-1)
}
路由跳转
addContactsHandle() {
this.$router.push({
path: '/contacts',
query: {
customerId: this.customerId,
customerName: this.customerName,
}
})
},
接收路由跳转的参数
this.$route.query.customerId
this.$route.query.customerName
16.element-ui获取半选状态下父节点
1.如果只是获取勾选的节点，无法获取选项的父节点
tree为dom上ref对应的值
this.$refs.tree.getCheckedNodes()
2.获取勾选的所有关联节点（所有的半选节点也一并获取）,低版本element-ui可能不适用
tree为dom上ref对应的值
this.$refs.tree.getCheckedNodes(false,true)
17.编辑表单得时候，可能根据id匹配不到name
v-for="(item,index) in customer" :key="index" ========>v-for="item in customer" :key="item.id"
<el-select v-model="form.customerId" :filterable="true" clearable placeholder="" remote reserve-keyword :disabled="customerId?true:status=='edit'?true:false" style="width: 100%" :remote-method="getCustomerList">
<el-option v-for="(item,index) in customer" :key="index" :label="item.customerName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-select v-model="form.customerId" :filterable="true" clearable placeholder="" remote reserve-keyword :disabled="customerId?true:status=='edit'?true:false" style="width: 100%" :remote-method="getCustomerList">
<el-option v-for="item in customer" :key="item.id" :label="item.customerName" :value="item.id">
</el-option>
</el-select>
</el-form-item>
18.表格 -文字超出省略号显示，鼠标经过文字浮窗显示
1.有插槽
<el-table-column prop='title' label='问卷调查标题' align="center" :show-overflow-tooltip="true" width="400">
<template slot-scope="scope">
<!-- <div style="color:#409EFF;cursor:pointer;white-space: nowrap;text-overflow: ellipsis;display:inline-block;margin-right:8px;" >{{scope.row.title}}</div> -->
<div style="color:#409EFF;cursor:pointer;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" >{{scope.row.title}}</div>
</template>
</el-table-column>
<el-table-column prop='name' label='问卷名称' align="center" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div style="color:#409EFF;cursor:pointer;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" >{{scope.row.name}}</div>
</template>
</el-table-column>
<el-table-column prop="comName" label="项目单位" :show-overflow-tooltip="true" align="center">
<template slot-scope="scope">
<span style="cursor:pointer;">{{scope.row.comName}}</span>
</template>
</el-table-column>
2.无插槽
<el-table-column prop='startDate' label='开始时间' align="center" :show-overflow-tooltip="true"></el-table-column>
19.表格 -文字超出省略号显示，鼠标经过文字浮窗显示，修改浮窗样式
20.在表单上熟练使用三元表达式
<el-form-item v-if="riskForm.type=='1'||riskForm.type=='2'" :label="riskForm.type=='1'?'一级风险排序：':'二级风险排序：'" prop="sort">
<el-input v-model="riskForm.sort"></el-input>
</el-form-item>
21.调用后端接口进行排序
sortable="custom"
22.日期的选择范围，
22.1当前日期的前20年
<el-form-item label="日期：" prop="time">
<el-date-picker v-model="ruleForm.time" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width:100%" :picker-options="pickerOptions">
</el-date-picker>
</el-form-item>
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now()-3600 * 1000 * 24 * 365 *20 ||time.getTime() > Date.now();
//3600 * 1000 一个小时
//3600 * 1000 * 24 一天
//3600 * 1000 * 24 * 365 一年
//3600 * 1000 * 24 * 365 *20 二十年
},
},
22.2 日期两年内可选
展示格式和传值
1.format="yyyy-MM-dd" 展示格式yyyy-MM-dd
2.value-format="yyyy-MM-dd" 向后端传值的格式yyyy-MM-dd
也可在data里面定义data(){}
3.定义可选范围:picker-options="pickerOptions",在data里面定义data(){}
<el-date-picker popper-class="LabelAlignClassName" width="180px" size="mini" v-model="formLabelAlign.docEffectiveEndDate" type="date" placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
</el-date-picker>
:format="format"
:value-format="valueFormat"
data(){
format:"yyyy-MM-dd",
valueFormat:"yyyy-MM-dd",
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - (3600 * 1000 * 24 * 365 * 1)||time.getTime() > Date.now();//两年前之前不可选，今天之后不可选
},
},
}
23. 给列表添加必填标志（自定义表头）
需要加深学习一下自定义表头
1.
<el-table-column prop='casesProgressPhase' label='被评价单位' align="center" :render-header="addRedStar">
<template slot-scope="scope">
<el-select v-model="scope.row.casesProgressPhase" placeholder="请选择" style="width:100%" clearable>
<el-option v-for="item in pageSizeList" :key="item.value" :label="item.label":value="item.value">
</el-option>
</el-select>
</template>
</el-table-column>
//列表添加必填标志,写在data里面
addRedStar(h, {
column
}) {
return [
h("span", {
style: "color: red"
}, "*"),
h("span", " " + column.label),
];
},
<el-table-column label="全选" :render-header="(h, obj) => renderHeader(h, obj, '确定')" >
</el-table-column>
// 自定义列名
renderHeader(h, { column, $index }, type){
let that = this;
return h(
'div',[
// 列名称
h('span', column.label),
// 按钮
h('el-button', {
props: {
type: 'primary',
// size: 'small',
},
style: 'margin-left: 15px;background:#169BD5;width:136px;',
on: {
click: function() {
that.clickButton(type);
}
}
}, '确定')
],
)
},
// 按钮点击事件
clickButton(type) {
console.log('我点击了' + type + '的列');
},
24 . el-table错行显示问题
全局都需要，在app.vue中写上样式
body .el-table th.gutter {
display: table-cell !important;
}
25.获取当前页的路由
//获取当前页的路由
this.$route.path
26.点击树的事件加自定义出传参
<el-tree :data="treeData2" @node-click="(data, node, item) => handleNodeClick(data, node, item,'时间')"></el-tree>
handleNodeClick(data, node, item, val) {
console.log("e,val", data, node, item, val);
if (val == "时间") {
this.formInline.startTime = parseTime(new Date(), "{y}-{m}") + "-01";//开始时间
this.formInline.endTime = parseTime(new Date(), "{y}-{m}-{d}");//结束时间
} else { }
},
27.新增页面-查看功能（颜色太暗-调亮）
<style >
.listBasisListAdd {
background: #fff;
padding: 0 20px 20px;
}
.footer-page {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.listBasisListAdd .el-input.is-disabled .el-input__inner {
color: #606266;
}
.listBasisListAdd .el-textarea.is-disabled .el-textarea__inner {
color: #606266;
}
.listBasisListAdd .el-button.is-disabled.el-button--text {
color: #86aed8;
}
.listBasisListAdd .el-button--primary.is-disabled {
background-color: #86aed8;
}
.listBasisListAdd .el-button.is-disabled.is-plain {
background-color: #fff;
border-color: #606266;
color: #606266;
}
</style>
28.判断对象中是否存在哪个属性 in
可以在这里试一下
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in
const car = { make: 'Honda', model: 'Accord', year: 1998 };
console.log('make' in car);
// expected output: true
delete car.make;
if ('make' in car === false) {
car.make = 'Suzuki';
}
console.log(car.make);
// expected output: "Suzuki"
//> true
//> "Suzuki"
const data= { make: 'Honda', model: 'Accord', year: 1998 };
const item= { make: 'Honda'};
for (const k in data) {
if (k in item) {
delete data[k]
}
}
29.将两个对象整合成一个
存在兼容性，且有先后顺序
params = Object.assign({}, params, params.infoArrayDTOList[0]);
30.删除数组中选中的那项
//tag为选中项
//this.tagsList删除的列表
this.tagsList.splice(this.tagsList.indexOf(tag), 1);
31.前端自定义的列表添加和删除
<el-form-item label="要求内容:" prop="infoArrayDTOList">
<el-button type="text" @click="handleAdd('内容')">添加</el-button>
<el-table :data="formData.infoArrayDTOList" height="300" class="box" :header-cell-style="{ background: 'rgb(242, 242, 242)' }" row-key="id" border fit highlight-current-row style="margin-top: 10px;">
<el-table-column type="index" label="序号" width="50" align="center"> </el-table-column>
<el-table-column prop='ruleName' label='信息' align="center" :render-header="addRedStar">
<template slot-scope="scope">
<el-form-item :prop="'infoArrayDTOList.' + scope.$index + '.ruleName'" :rules="formRules.ruleName">
<el-input v-model="scope.row.ruleName" />
</el-form-item>
</template>
</el-table-column>
<el-table-column prop='jobPosition' label='岗位' align="center" :render-header="addRedStar">
<template slot-scope="scope">
<el-form-item :prop="'infoArrayDTOList.' + scope.$index + '.jobPosition'" :rules="formRules.jobPosition">
<el-select v-model="scope.row.jobPosition" multiple clearable placeholder="请选择" style="width:100%">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column prop="" label="操作" align="center" width="80">
<template slot-scope="scope">
<el-button type="text" size="mini" :disabled="formTitleTip!='add'" @click.native.prevent="handleDelete('内容',scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form-item>
formData:{
infoArrayDTOList:[],
},
formRules:{
contractOppositeName: [
{ required: true, message: "不能为空", trigger: "blur" },
{ max: 20, message: "20字以内", trigger: "blur" },
],
jobPosition: [
{ required: true, message: "不能为空", trigger: "blur" },
{ max: 20, message: "20字以内", trigger: "blur" },
],
},
handleAdd(val) {
let obj = {
ruleName: "",
jobPosition: "",
};
if (val == "内容") {
this.formData.infoArrayDTOList.push(obj);
}
},
//删除行
handleDelete(val, index) {
if (val == "内容") {
this.formData.infoArrayDTOList.splice(index, 1);
}
},
32.实现rule的嵌套
<el-form ref="ruleForm" :rules="formRules" :model="ruleForm" label-width="200px" >
<el-form-item label="受理机构名称：" prop="legalCasesInfoDTO.name">
<el-input v-model="ruleForm.legalCasesInfoDTO.name" placeholder="请输入"></el-input>
</el-form-item>
</el-form >
data(){
return {
ruleForm:{
legalCasesInfoDTO:{
name:"",
},
},
formRules:{
legalCasesInfoDTO: {
name: [
{ required: true, message: "不能为空", trigger: "blur" },
],
},
}
}
33.el-table-column将列表中的id通过list转换成对应的中文名称
<el-table-column prop="classify" label="清单分类" align="center">
<template slot-scope="scope">
<div v-for=" (item,index) in classifyList" :key="index">
<span v-if="item.id== scope.row.classify">{{item.dictLabel}}</span>
</div>
</template>
</el-table-column>
34.parseTime获取格式化后的时间
import { parseTime } from "@/utils";
let time=parseTime(new Date(), "{y}-{m}-{d}")
35.el-table-选择列表数据
<el-table :data="tableData" height="500" style="width: 100%" center
border highlight-current-row @select="tableDataSelect" @select-all="tableDataSelectAll">
</el-table>
tableData:[],
selectList:[],
//选择表格
tableDataSelect(e) {
// console.log("选择表格", e);
this.selectList = e;
},
// 全选表格
tableDataSelectAll(e) {
// console.log("全选表格", e);
this.selectList = e;
},
36.el-row错乱
.el-row {
display: flex;
flex-wrap: wrap;
}
37 this.$forceUpdate() 强制组件渲染。
在vue框架中，若果data中有一个变量：ruleForm: {name: “小明”}, 修改ruleForm.name，组件会自动更新。 但如果给ruleForm增加属性，如：ruleForm.age = “12”. 此时 组件是不会更新的。以下两种方法让新增属性更新组件
第一种
this.ruleForm.age=12
this.$forceUpdate();
第二种
this.$set(this.ruleForm,"age",12);
添加：@change=“$forceUpdate()” 强制更新！解决问题；
<el-input
v-model="formObj.equipmentName"
placeholder="充电桩名称"
maxlength="20"
show-word-limit
@change="$forceUpdate()">
</el-input>
38 js中“??“和“?.“怎么用？
38.1 ？？：空值合并操作符
逻辑操作符，左侧为null和undefined时，才返回右侧的数
const sum = null ?? 12
console.log(sum);
//输出12
const sum1 = 12 ?? 23
console.log(sum1);
//输出12
const sum2 = undefined ?? 12
console.log(sum2);
//输出12
38.2 ?. 可选链运算符
?. 可选链运算符，检查每个级别，如果碰到的是 undefined 或 null 属性，直接返回 undefined，不会继续往下检查
可以读取位于连接对象链深处属性的值，不必明确验证链中的每个引用是否有效
功能类似于“.” 链式操作符，不同之处在于，在引用为空null 或者 undefined 的情况下不会引起错误，该表达式短路返回值是 undefined
与函数调用一起使用时，如果给定的函数不存在，则返回 undefined。
const info = {
name: '张三',
son: {
name: '张武'
},
};
const girl1= info.girl?.name;
console.log(girl1);
//输出undefined
const son1= info.son?.name;
console.log(son1);
//输出 张武
短路计算
let a = null;
let x = 0;
let prop = a?.[x++];
console.log(x); // x 将不会被递增，依旧输出 0