7.23

2023-12-15 10:57:27

10. 自定义的函数并且自己调用了
<el-select
v-model="eventAna.pro"
filterable
@change="analysisProChanged(index)"
size="small"
placeholder="选择属性"
>

11. <el-select
v-model="eventAna.pro" //那么收集到的也是一个标志符identifier
filterable
@change="analysisProChanged(index)"
size="small"
placeholder="选择属性"
>
<el-option-group>
<el-option
v-for="item in statisticProperties"
:key="item.identifier"
:label="item.name"
:value="item.identifier" //value值为identifier，一个标识符
>
</el-option>
</el-option-group>
<el-option-group>
<el-option
v-for="item in eventAna.bindProperties"
:key="item.identifier"
:label="item.name"
:value="item.identifier"
>
</el-option>
</el-option-group>

12
const singleStr="a";
const str=["a","b","c"]
function judgeIsExistOrNo(single){
for(i=0;i<=str.length;i++){
if(single===str[i]){
return false
}
return true
}

}
const result=judgeIsExistOrNo(singleStr)
console.log(result)//false//需要掌握if的用法

13. let bindProperties = eventAnti.bindProperties;
//for in 一般用来遍历对象，但是数组是特殊对象、所以可以用来遍历
for (let index in bindProperties)


遍历数组可以用for of 遍历（for of 可以遍历具有iterater接口的数据结构、比如Set和map和string和Array）

​

14.使用pl-table解决 vue+elment el-table 或el-tree （表格列表或树形控件）渲染万条以上的大数据，数据过多导致卡顿问题
使用第三方插件 https://github.com/livelyPeng/pl-table.
具体使用方法也需参照上面github 这里el-tree卡顿直接去上述链接github参照pl-table进行修改并修改部分样式就是一个el-tree组件了
下面是简略的使用方法！！！
例子：
1.安装pl-table
npm i pl-table

2.main.js文件直接引入
import plTable from 'pl-table'
import 'pl-table/themes/index.css' // 引入样式（必须引入)，vuecli3.0不需要配置，cli2.0请查看webpack是否配置了url-loader对woff，ttf文件的引用,不配置会报错哦

import 'pl-table/themes/plTableStyle.css' // 默认表格样式很丑 引入这个样式就可以好看啦（如果你不喜欢这个样式，就不要引入，不引入就跟ele表格样式一样）
Vue.use(plTable);

3.pl-table基于el-table，所以继承了el-table组件的所有方法
只需要把所有带el-table开头的标签改为pl-table开头 并加入use-virtual 属性
如：<pl-table use-virtual ></pl-table>

<!-- 使用 useVirtual 属性开启虚拟滚动 使用虚拟滚动时，必须要固定表格高度和行高 -->

<!--我是Y轴虚拟-->
<div v-if="true">
<p style="color: red">我是Y轴虚拟</p>
<pl-table ref="plTable"
:height="height"
:data="data.tableData"
selectTrClass="selectTr"
header-drag-style
:dataChangesScrollTop="false"
:summary-method="summaryMethod"
@table-body-scroll="tableBodyScroll"
fixedColumnsRoll
inverse-current-row
bigDataCheckbox
@select-all="selectAll"
show-summary
use-virtual
:row-height="rowHeight">
<template slot="empty">
没有查询到符合条件的记录
</template>
<pl-table-column type="selection" width="55" :selectable="selectable"/>
<pl-table-column type="index" width="100" fixed/>
<!--show-overflow-tooltip属性代表超出则内容部分给出提示框-->
<pl-table-column
v-for="item in columns"
:key="item.id"
:resizable="item.resizable"
:show-overflow-tooltip="item.showOverflowTooltip"
:prop="item.prop"
:label="item.label"
:fixed="item.fixed"
:width="item.width"/>
</pl-table>
</div>
————————————————
版权声明：本文为CSDN博主「HHH 917」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43245095/article/details/107300573
<!--我是X + Y轴同时虚拟-->
<div v-if="false">
<p style="color: red">我是X + Y轴同时虚拟</p>
<plx-table-grid :data="data.tableData"
height="300"
:show-summary="true"
:summary-method="summaryMethod"
ref="plTable2">
<plx-table-column type="selection" width="55" fixed="left"/>
<plx-table-column type="index" width="100" fixed="left"/>
<plx-table-column
v-for="item in columns2"
:key="item.id"
:resizable="item.resizable"
:prop="item.prop"
:label="item.label"
:fixed="item.fixed"/>
</plx-table-grid>
</div>
https://gitee.com/shenyz/pl-table //最为详细解释
————————————————
版权声明：本文为CSDN //博主「HHH 917」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43245095/article/details/107300573
————————————————
版权声明：本文为CSDN博主「HHH 917」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43245095/article/details/107300573

 

15.
table表格中放入selector做成这种形式

<plx-table-column min-width="130" align="right">
<template slot="header" slot-scope="scope">
<el-select v-model="targetMetric" size="mini" placeholder="选择指标">
<el-option
v-for="(item, index) in ['合计值', '平均值']"
:key="index"
:label="item"
:value="item"
>
</el-option>
</el-select>
</template>
<template slot-scope="scope">
{{ targetMetric === '合计值' ? scope.row.total : scope.row.avg }}
</template>
​ </plx-table-column>
​7.23

![image-20210723141919474](C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210723141919474.png)


16.在vue组件中引入js文件中的放法
methods.js中：
const Methods={
//处理数据的放法，这样相当于写成了对象形式
findData(可传参数){

}
//或者其他一些数据，也写成对象形式
otherData:{
yourData:0;
yourIdea:1;
}


​
​ }
​ export default Methods
​
​ vue组件中：
​ import Methods from "../路径"
​
方法使用： Methods.findData(可传参数)
数据使用： Methods.otherData.yourData //结果为零

重点：
列子：
js文件中：（js文件中引入到vue组件中可以使用this.selectors调用js中的selector中的数据===========是不是神奇）
const Selectors = {
numberSelectors: [{name:'!=',value:0},{name:'=',value:1},{name:'>',value:2},
{name:'>=',value:3},{name:'<',value:4},{name:'<=',value:5},{name:'between',value:6},{name:'有值',value:11},{name:'无值',value:12}],
stringSelectors: [{name:'=',value:7},{name:'!=',value:8},{name:'有值',value:13},{name:'无值',value:14},{name:'包含',value:15},{name:'不包含',value:16}],
booleanSelectors: [{name:'布尔值',value:9},{name:'有值',value:17},{name:'无值',value:18}],
dateSelectors: [{name:'日期',value:10},{name:'有值',value:19},{name:'无值',value:20}],

if(filter.selector<6){
for(let index in this.numberSelectors){
if(this.numberSelectors[index].value === filter.selector){
return filter.filterName + this.numberSelectors[index].name + filter.payload1
}
}

16.
substr函数格式 (俗称：字符截取函数)
　　格式1： substr(string string, int a, int b);
　　格式2：substr(string string, int a) ;
解释：
格式1：
1、string 需要截取的字符串
2、a 截取字符串的开始位置（注：当a等于0或1时，都是从第一位开始截取）
3、b 要截取的字符串的长度
格式2：
1、string 需要截取的字符串
2、a 可以理解为从第a个字符开始截取后面所有的字符串。
————————————————
版权声明：本文为CSDN博主「大头博客」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44999591/article/details/100162487


重点：
js中：
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
语法
stringObject.substr(start,length) //返回抽取的字符

17.
Date.parse()
parse 方法接受一个日期字符串（例如 "Dec 25, 1995"），并返回从1970-1-1 00:00:00 UTC到该日期字符串所表示日期的毫秒数。该方法在基于字符串值设置日期值时很有用，例如结合使用setTime() 方法和 Date() 构造函数。

//返回事件的毫秒数
let start = Date.parse(this.startDate.substr(0, 10));
let end = Date.parse(this.endDate.substr(0, 10));
//从毫秒获取天数
let days = (end - start) / (24 * 60 * 60 * 1000);


​
​
18.
​ <el-select v-if="selectable" style="margin-left: 5px" v-model="innerTimeUnit" placeholder="请选择" size="small"
​ @change="selectedTimeUnit">
​ <el-option
​ v-for="item in timeUnitOptions" //渲染timeUnitOptions
​ :key="item.value"
​ :label="item.label"
​ :value="item.value"
​ :disabled="item.disabled">
​ </el-option>
​ </el-select>
​

传进去的数据中放入了disabled数据：(用来禁用一些选项)
this.timeUnitOptions = [
{
value: 0,
label: '分钟',
disabled: true
},
{
value: 1,
label: '小时'
},
]

19.
在created中无法获取props传递过来的数据

20.
通过 Prop 向子组件传递数据
早些时候，我们提到了创建一个博文组件的事情。问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。这也正是 prop 的由来。

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。

一个 prop 被注册之后，你就可以像这样把数据作为一个自定义 attribute 传递进来：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>

上一篇：Oracle 存储过程5：PL/SQL异常处理


下一篇：PL lua源码剖析-云风.pdf