- Element-UI中el-time-picker时间选择器无法选择
爱健身的小刘同学
bugElementVue系列javascript前端elementui
前言前几天开发时,在做一个时间选择时,遇到了无法选中时间的问题在网络上找了解决方法,特此记录一下解决方法我的代码结构营业时间时间选择不上的原因是因为初始值问题很有可能是最开始赋值为空数组了所以有3个解决方法1.设置为nullbusinessTimeInfo:null2.设置当前时间businessTimeInfo:[newDate(newDate()),newDate(newDate())](默认
- Element-UI穿梭框去掉左箭头按钮
太空漫步11
vuejqueryelementui
往vue项目中加入一个穿梭框页面首先在views目录中创建Transfer.vue文件:import$from'jquery'exportdefault{mounted(){console.log('mounted');$('.el-transfer__buttons').children().first().remove();},data(){constgenerateData=_=>{cons
- Vue项目中使用Mock.js进行API模拟
洛可可白
前端专栏javascriptvue.js前端
Vue项目中使用Mock.js进行API模拟前言欢迎来到我的小天地,这里是我记录技术点滴、分享学习心得的地方。️技能清单编程语言:Java、C、C++、Python、Go、前端技术:Jquery、Vue.js、React、uni-app、EchartsUI设计:Element-ui、Antd、Color-ui后端技术:SpringBoot、Mybatis-plus、Swagger移动开发:Andr
- element-ui 分页器中的 :current-page.sync是干什么的
才艺のblog
uivue.jsjavascript
在ElementUI中,current-page.sync是用于实现父子组件间关于当前页码的双向绑定的。具体来说:双向绑定:.sync修饰符是Vue提供的一种语法糖,用于简化父子组件之间关于props的更新和事件触发的代码。当子组件改变了父组件传来的prop时,可以通过.sync修饰符通知父组件进行相应的更新。使用场景:在分页组件中,通常需要将当前页码的状态在多个组件间共享。通过使用current
- element-ui 中 使用<el-upload></el-upload>组件,第二次点击上传无反应
今天星期八
vue.js前端javascriptelementui
出现问题:在vue项目中使用el-upload组件,实现文件上传的功能,第一次点击可以上传,第二次点击按钮无反应出现此问题的原因:由于上次上传的文件流还在,未被清除解决办法:通过ref与组件进行关联导入在上传成功的函数中进行清空流文件handleAvatarSuccess(response,file,fileList){this.$refs.fileUploadBtn.clearFiles();/
- vue3实现表格单元格可编辑
HuaHua·Li
javascriptvue.js前端elementui
以往编辑表格内容都是点击编辑按钮,进入编辑页面或弹窗对整行做编辑的效果。而这次由于项目需要实现在表格内双击就能编辑对应单元格的功能,对于没有做过的我来说也是一个新挑战。需要达到的效果:方案一由于项目使用的是element-ui,所以一开始想到的就是去table组件找有没有能满足此需求的属性。没想到还真有(cell-dblclick)。下面看实现效果(部分代码):{{props.row.amount
- element-ui——修改el-dialog样式自定义class
dbt@L
ElementUIuivue.jselementui
custom-class:Dialog的自定义类名/deep/.customClass{background:#09374c;}
- element-ui版本问题导致el-table-column输入框无法输入
Enno.Z
踩坑日常elementuiinputel-table-column输入框无法输入
起因有次发版后,el-table-column的input输入框无法输入了,select框却可以,本地项目测试OK,测试环境测试OK,就是生产发生了这个事情。查询原因三个环境有两个好的,排除代码问题,可能是依赖的element-ui的版本问题。本地element-ui版本是2.4.10,测试element-ui版本是2.8.2,而生产运维用是最新的版本。更新版本因为另一个模块用的树结构需要把ele
- Vue中使用Element-ui时报错
是小蟹呀^
知识总结vue.jselementui
Error:Cannotfindmodule'babel-preset-es2015'Requirestack:-D:\webDesign_study_projects\Vue\vue_router\node_modules\@babel\core\lib\config\files\plugins.js-D:\webDesign_study_projects\Vue\vue_router\node
- Element-ui:头像上传
.@d
pythondjangovuepython
本篇文章用到element官网和七牛云官网element-ui官网:https://element.eleme.io/#/zh-CN七牛云官网:https://www.qiniu.com/1.七牛云注册登录之后然后实名认证2.进入对象存储后进入空间管理3.新建空间在这里就能拿到cdn测试域名pythonSDK在开发者中心可以查看使用七牛云就需要安装他pipinstallqiniu我们使用封装的思想
- Element-ui 步骤条功能拓展——动态生成步骤条
菜鸟茜
ElementVUEvueelement-uiel-step步骤流程
需求:最近在做应急预案的vue页面,需要有上一步、下一步等功能,并且每一个预案都是一个简单流程题外话:感觉使用vue+Element-ui来做,真的是方便很多很多,思路清晰,代码简洁。如果是按照以前的写法,肯定是要多个上一步、下一步按钮,并且每个按钮都要用js写相应的click事件。当然最后呈现出来的代码还是要看个人能力的凝练程度。思路重点:el-steps的active的对应每个步骤要显示的di
- vue2+高德地图web端开发(二)
松果猿
前端vue.jsjavascript
前言:高德地图输入提示与POI搜索相关文档:输入提示与POI搜索-服务插件和工具-进阶教程-地图JSAPI2.0|高德地图API(amap.com)输入提示-输入提示-示例中心-JSAPI2.0示例|高德地图API(amap.com)创建输入框:引入Element组件库:关于引入element可以看我的这篇文章:Vue框架中引入Element-UI组件库-CSDN博客引入输入框组件componen
- element-ui 自定义表头label(利用 :slot=“header“ slot-scope=“slot“)
大大。
element相关uivue.jsjavascriptelementui
*产品名称板件输条码/五金输名称效果如下:重点看这://重点*产品名称板件输条码/五金输名称//
- vue-i18n的简单使用兼容element-ui
一个巨蟹座的前端
vuejs数组htmljsvue.js前端javascript
1.首先下载vue-i18nnpmivue-18n--save2.在项目根目录新建文件夹(自己命名)i18n.config.js,写如下代码注意:小编在vue.config.js里面配置了路径别名,@l指向src/lang目录importVuefrom'vue'importVueI18nfrom'vue-i18n'importElementfrom'element-ui'constzh=requi
- vue+vue-i18n+element 国际化
飞鸟的悲伤1314
vueelement-uivue-i18n
1.先创建一个lang文件夹,创建两个js文件en.js(英文),zh.js(中文),另外创建一个index.js文件(用于)en.jszh.js(两者必须保持一致)2.在index.js中引入vue和vue-i18n,并注册vue-i18n然后引入en.js和zh.js两个文件(1)elementEnLocale和elementZhLocale是element-ui国际化需要的,如果没有使用el
- el-table无限滚动加载更多-翻页
coderfl
element-ui的表格与无限滚动的结合(el-table+infinite-scroll)安装(建议安装1.X版本,2.X版本目前报错无法使用)npminstall--saveel-table-infinite-scroll@1全局引入importVuefrom'vue';importelTableInfiniteScrollfrom'el-table-infinite-scroll';Vue
- vue项目中绘制bpmn流程图
伴歌知行
最近有个需求:在项目中绘制bpmn流程图,使用的插件是:bpmn-js实现的效果如下图所示image.png安装bpmn-jsnpminstallbpmn-js安装节点属性面板npminstallbpmn-js-properties-panel新建vue单文件下面是html部分,注意楼主使用了element-ui的按钮组件,没有用element-ui的童鞋自行修改打开bpmn文件BPMNdiagr
- js html表单设计器,可视化表单设计器拖拽生成表单(原创)
吹狗螺的简柏承
jshtml表单设计器
插件描述:可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。更新时间:2021-04-1121:56:01form-create-designerform-create-designer是基于@form-create/element-ui实现的表单设计器组件。可以通过拖拽的方式快速创建表单,提高开发者对表单的开发效率,节省开发者的时间。安装npminstall@form
- vue 实现多个可拖拽的element-ui Dialog
嘻哈章鱼小丸子
直接上代码//css.el-dialog__wrapper{overflow:hidden!important;pointer-events:none;}.sc-common-dialog.el-dialog{margin:0!important;pointer-events:auto;top:80px;left:calc(50%-490px);height:625px;box-shadow:0p
- div、Flex、element-ui-layout页面布局
长不大的大灰狼
前端知识vue前端
div、Flex、element-ui-layout页面布局一、div页面布局1、页面布局标签属性2、定位属性3、盒子模型(1)标准盒模型(2)怪异盒模型二、Flex页面布局1、基本概念2、容器的属性3、项目的属性三、element-ui——layout布局1、基本概念2、gutter属性3、offset属性4、对齐方式一、div页面布局1、页面布局标签属性(1)标签无意义块状标签段落标签无序列表
- element-ui复杂table表格-动态新增列、动态调整行、列顺序
三月的一天
vue.jselementui前端javascript
目标:实现一个复杂table具有以下功能:表格行展开、全部展开、收起、全部收起;可动态配置展示哪些列、调整列展示顺序;动态调整行顺序、行上移、行下移、行移动最顶部、行移动最底部一、页面效果:1.全部展开2.全部收起3.配置显示列4.调整字段顺序(拖拽方式)5.行操作(查看、修改、删除、行上下移动)二、代码实现(vue+Element-ui)思路:本质上就是将表格看成一个数组,对表格的操作当成对数组
- Element-UI 多个el-upload组件自定义上传,不用上传url,并且携带自定义传参(文件序号)
Cutecumber
web开发vue.jselementui
1.需求:有多个(不确定具体数量)的upload组件,每个都需要单独上传获取文件(JSFile类型),不需要action上传到指定url,自定义上传动作和http操作。而且因为不确定组件数量,所以每次也需要获取是第几个文件(索引),所以也需要实现附加索引这个参数2.实现:如下#list不知道一共有几个列表项{returnonRemove(file,fileList,index)}"#这里的inde
- vue引入element-ui的css后报错
shaguamayi
ERRORFailedtocompilewith1errors15:24:02errorin./node_modules/
[email protected]@element-ui/lib/theme-chalk/index.cssModulebuildfailed:Error:NoPostCSSConfigfoundin:D:\文件\vue-slot-demo-master\vue-slot-de
- vue element-ui table 对获取的数据进行toggleRowSelection
小狼在IT
data(){return{Detail:[]}}methods:{get_Detail(){letgetDetail=[]//获取的数据this.Detail=getDetaillet_this=this//必须要在$nextTick里面执行,否则toggleRowSelection无效_this.$nextTick(function(){_this.$refs.DetailTable.togg
- IE中elementUI 分页控价-输入页码的input回车跳转的问题
听风不予
问题描述在使用Element-UI的过程中发现其分页组件存在一个BUG,其‘前往【】页'中的input的回车时间存在失效不响应事件的问题第一次事可以的,第二次之后的操作,没有任何的反应;image.png针对在这个问题研究了下,element本身的组件在IE中的标线是正常的,在我们使用的时候却发现了问题,定位发现没有走到对应的事件中方案:结合jquery使用原生的键盘监听事件来控制,只是针对页面的
- electron-vue使用elementui,有数据但table表格显示空白
Hi小胡
在.electron-vue目录下找到webpack.renderer.config.js文件,修改:letwhiteListedModules=['vue']-->letwhiteListedModules=['vue','element-ui']
- element-ui解决上传文件时需要携带请求数据的问题
小钱c7
vueelementui前端
一、问题描述在前端使用element-ui进行文件上传时,需要携带请求头信息,比如Token。二、问题解决1.表单实现action置空添加:http-request属性覆盖默认的上传行为,实现自定义上传文件。注意:src后的图片路径如果是个网络请求(外链),那么在前面拼接//即可,否则会出现localhost:8080/外链的奇葩问题。点击上传头像,只能上传jpg/png文件,且不超过1mb2.j
- vue.js element-ui validate中代码不执行填坑
知止至得
先说结论在自定义验证里面每一个判断都要有callback(),就是要保证callback()一定会执行到因为要验证数字,参考了官网参考代码如下,发现有如下图bug,当输入为以数字开头包含字符串的内容时,验证不会报错,因为业务逻辑也不相符,随改写代码varcheckAge=(rule,value,callback)=>{if(!value){returncallback(newError('年龄不能
- Blog: 用element-ui表格实现可在表格内编辑,修改数据
weixin_43160044
element-uivuevue.js前端
实现效果如下:更改完数据也改变了{{scope.row.date}}{{scope.row.name}}{{scope.row.isEdit?'完成':'编辑'}}exportdefault{data(){return{tableData:[{date:'2016-05-02',name:'王小虎1',address:'上海市普陀区金沙江路1518弄'},{date:'2016-05-04',na
- 【element-ui】el-table实现跨页多选
倒霉娃不要倒霉
element-ui案例vue.js前端javascript
1、el-table添加属性row-key2、el-table-column添加属性reserve-selection为truegetRowKey(row){returnrow.id},selectionChange(val){this.currentSelection=val}
- SAX解析xml文件
小猪猪08
xml
1.创建SAXParserFactory实例
2.通过SAXParserFactory对象获取SAXParser实例
3.创建一个类SAXParserHander继续DefaultHandler,并且实例化这个类
4.SAXParser实例的parse来获取文件
public static void main(String[] args) {
//
- 为什么mysql里的ibdata1文件不断的增长?
brotherlamp
linuxlinux运维linux资料linux视频linux运维自学
我们在 Percona 支持栏目经常收到关于 MySQL 的 ibdata1 文件的这个问题。
当监控服务器发送一个关于 MySQL 服务器存储的报警时,恐慌就开始了 —— 就是说磁盘快要满了。
一番调查后你意识到大多数地盘空间被 InnoDB 的共享表空间 ibdata1 使用。而你已经启用了 innodbfileper_table,所以问题是:
ibdata1存了什么?
当你启用了 i
- Quartz-quartz.properties配置
eksliang
quartz
其实Quartz JAR文件的org.quartz包下就包含了一个quartz.properties属性配置文件并提供了默认设置。如果需要调整默认配置,可以在类路径下建立一个新的quartz.properties,它将自动被Quartz加载并覆盖默认的设置。
下面是这些默认值的解释
#-----集群的配置
org.quartz.scheduler.instanceName =
- informatica session的使用
18289753290
workflowsessionlogInformatica
如果希望workflow存储最近20次的log,在session里的Config Object设置,log options做配置,save session log :sessions run ;savesessio log for these runs:20
session下面的source 里面有个tracing 
- Scrapy抓取网页时出现CRC check failed 0x471e6e9a != 0x7c07b839L的错误
酷的飞上天空
scrapy
Scrapy版本0.14.4
出现问题现象:
ERROR: Error downloading <GET http://xxxxx CRC check failed
解决方法
1.设置网络请求时的header中的属性'Accept-Encoding': '*;q=0'
明确表示不支持任何形式的压缩格式,避免程序的解压
- java Swing小集锦
永夜-极光
java swing
1.关闭窗体弹出确认对话框
1.1 this.setDefaultCloseOperation (JFrame.DO_NOTHING_ON_CLOSE);
1.2
this.addWindowListener (
new WindowAdapter () {
public void windo
- 强制删除.svn文件夹
随便小屋
java
在windows上,从别处复制的项目中可能带有.svn文件夹,手动删除太麻烦,并且每个文件夹下都有。所以写了个程序进行删除。因为.svn文件夹在windows上是只读的,所以用File中的delete()和deleteOnExist()方法都不能将其删除,所以只能采用windows命令方式进行删除
- GET和POST有什么区别?及为什么网上的多数答案都是错的。
aijuans
get post
如果有人问你,GET和POST,有什么区别?你会如何回答? 我的经历
前几天有人问我这个问题。我说GET是用于获取数据的,POST,一般用于将数据发给服务器之用。
这个答案好像并不是他想要的。于是他继续追问有没有别的区别?我说这就是个名字而已,如果服务器支持,他完全可以把G
- 谈谈新浪微博背后的那些算法
aoyouzi
谈谈新浪微博背后的那些算法
本文对微博中常见的问题的对应算法进行了简单的介绍,在实际应用中的算法比介绍的要复杂的多。当然,本文覆盖的主题并不全,比如好友推荐、热点跟踪等就没有涉及到。但古人云“窥一斑而见全豹”,希望本文的介绍能帮助大家更好的理解微博这样的社交网络应用。
微博是一个很多人都在用的社交应用。天天刷微博的人每天都会进行着这样几个操作:原创、转发、回复、阅读、关注、@等。其中,前四个是针对短博文,最后的关注和@则针
- Connection reset 连接被重置的解决方法
百合不是茶
java字符流连接被重置
流是java的核心部分,,昨天在做android服务器连接服务器的时候出了问题,就将代码放到java中执行,结果还是一样连接被重置
被重置的代码如下;
客户端代码;
package 通信软件服务器;
import java.io.BufferedWriter;
import java.io.OutputStream;
import java.io.O
- web.xml配置详解之filter
bijian1013
javaweb.xmlfilter
一.定义
<filter>
<filter-name>encodingfilter</filter-name>
<filter-class>com.my.app.EncodingFilter</filter-class>
<init-param>
<param-name>encoding<
- Heritrix
Bill_chen
多线程xml算法制造配置管理
作为纯Java语言开发的、功能强大的网络爬虫Heritrix,其功能极其强大,且扩展性良好,深受热爱搜索技术的盆友们的喜爱,但它配置较为复杂,且源码不好理解,最近又使劲看了下,结合自己的学习和理解,跟大家分享Heritrix的点点滴滴。
Heritrix的下载(http://sourceforge.net/projects/archive-crawler/)安装、配置,就不罗嗦了,可以自己找找资
- 【Zookeeper】FAQ
bit1129
zookeeper
1.脱离IDE,运行简单的Java客户端程序
#ZkClient是简单的Zookeeper~$ java -cp "./:zookeeper-3.4.6.jar:./lib/*" ZKClient
1. Zookeeper是的Watcher回调是同步操作,需要添加异步处理的代码
2. 如果Zookeeper集群跨越多个机房,那么Leader/
- The user specified as a definer ('aaa'@'localhost') does not exist
白糖_
localhost
今天遇到一个客户BUG,当前的jdbc连接用户是root,然后部分删除操作都会报下面这个错误:The user specified as a definer ('aaa'@'localhost') does not exist
最后找原因发现删除操作做了触发器,而触发器里面有这样一句
/*!50017 DEFINER = ''aaa@'localhost' */
原来最初
- javascript中showModelDialog刷新父页面
bozch
JavaScript刷新父页面showModalDialog
在页面中使用showModalDialog打开模式子页面窗口的时候,如果想在子页面中操作父页面中的某个节点,可以通过如下的进行:
window.showModalDialog('url',self,‘status...’); // 首先中间参数使用self
在子页面使用w
- 编程之美-买书折扣
bylijinnan
编程之美
import java.util.Arrays;
public class BookDiscount {
/**编程之美 买书折扣
书上的贪心算法的分析很有意思,我看了半天看不懂,结果作者说,贪心算法在这个问题上是不适用的。。
下面用动态规划实现。
哈利波特这本书一共有五卷,每卷都是8欧元,如果读者一次购买不同的两卷可扣除5%的折扣,三卷10%,四卷20%,五卷
- 关于struts2.3.4项目跨站执行脚本以及远程执行漏洞修复概要
chenbowen00
strutsWEB安全
因为近期负责的几个银行系统软件,需要交付客户,因此客户专门请了安全公司对系统进行了安全评测,结果发现了诸如跨站执行脚本,远程执行漏洞以及弱口令等问题。
下面记录下本次解决的过程以便后续
1、首先从最简单的开始处理,服务器的弱口令问题,首先根据安全工具提供的测试描述中发现应用服务器中存在一个匿名用户,默认是不需要密码的,经过分析发现服务器使用了FTP协议,
而使用ftp协议默认会产生一个匿名用
- [电力与暖气]煤炭燃烧与电力加温
comsci
在宇宙中,用贝塔射线观测地球某个部分,看上去,好像一个个马蜂窝,又像珊瑚礁一样,原来是某个国家的采煤区.....
不过,这个采煤区的煤炭看来是要用完了.....那么依赖将起燃烧并取暖的城市,在极度严寒的季节中...该怎么办呢?
&nbs
- oracle O7_DICTIONARY_ACCESSIBILITY参数
daizj
oracle
O7_DICTIONARY_ACCESSIBILITY参数控制对数据字典的访问.设置为true,如果用户被授予了如select any table等any table权限,用户即使不是dba或sysdba用户也可以访问数据字典.在9i及以上版本默认为false,8i及以前版本默认为true.如果设置为true就可能会带来安全上的一些问题.这也就为什么O7_DICTIONARY_ACCESSIBIL
- 比较全面的MySQL优化参考
dengkane
mysql
本文整理了一些MySQL的通用优化方法,做个简单的总结分享,旨在帮助那些没有专职MySQL DBA的企业做好基本的优化工作,至于具体的SQL优化,大部分通过加适当的索引即可达到效果,更复杂的就需要具体分析了,可以参考本站的一些优化案例或者联系我,下方有我的联系方式。这是上篇。
1、硬件层相关优化
1.1、CPU相关
在服务器的BIOS设置中,可
- C语言homework2,有一个逆序打印数字的小算法
dcj3sjt126com
c
#h1#
0、完成课堂例子
1、将一个四位数逆序打印
1234 ==> 4321
实现方法一:
# include <stdio.h>
int main(void)
{
int i = 1234;
int one = i%10;
int two = i / 10 % 10;
int three = i / 100 % 10;
- apacheBench对网站进行压力测试
dcj3sjt126com
apachebench
ab 的全称是 ApacheBench , 是 Apache 附带的一个小工具 , 专门用于 HTTP Server 的 benchmark testing , 可以同时模拟多个并发请求。前段时间看到公司的开发人员也在用它作一些测试,看起来也不错,很简单,也很容易使用,所以今天花一点时间看了一下。
通过下面的一个简单的例子和注释,相信大家可以更容易理解这个工具的使用。
- 2种办法让HashMap线程安全
flyfoxs
javajdkjni
多线程之--2种办法让HashMap线程安全
多线程之--synchronized 和reentrantlock的优缺点
多线程之--2种JAVA乐观锁的比较( NonfairSync VS. FairSync)
HashMap不是线程安全的,往往在写程序时需要通过一些方法来回避.其实JDK原生的提供了2种方法让HashMap支持线程安全.
- Spring Security(04)——认证简介
234390216
Spring Security认证过程
认证简介
目录
1.1 认证过程
1.2 Web应用的认证过程
1.2.1 ExceptionTranslationFilter
1.2.2 在request之间共享SecurityContext
1
- Java 位运算
Javahuhui
java位运算
// 左移( << ) 低位补0
// 0000 0000 0000 0000 0000 0000 0000 0110 然后左移2位后,低位补0:
// 0000 0000 0000 0000 0000 0000 0001 1000
System.out.println(6 << 2);// 运行结果是24
// 右移( >> ) 高位补"
- mysql免安装版配置
ldzyz007
mysql
1、my-small.ini是为了小型数据库而设计的。不应该把这个模型用于含有一些常用项目的数据库。
2、my-medium.ini是为中等规模的数据库而设计的。如果你正在企业中使用RHEL,可能会比这个操作系统的最小RAM需求(256MB)明显多得多的物理内存。由此可见,如果有那么多RAM内存可以使用,自然可以在同一台机器上运行其它服务。
3、my-large.ini是为专用于一个SQL数据
- MFC和ado数据库使用时遇到的问题
你不认识的休道人
sqlC++mfc
===================================================================
第一个
===================================================================
try{
CString sql;
sql.Format("select * from p
- 表单重复提交Double Submits
rensanning
double
可能发生的场景:
*多次点击提交按钮
*刷新页面
*点击浏览器回退按钮
*直接访问收藏夹中的地址
*重复发送HTTP请求(Ajax)
(1)点击按钮后disable该按钮一会儿,这样能避免急躁的用户频繁点击按钮。
这种方法确实有些粗暴,友好一点的可以把按钮的文字变一下做个提示,比如Bootstrap的做法:
http://getbootstrap.co
- Java String 十大常见问题
tomcat_oracle
java正则表达式
1.字符串比较,使用“==”还是equals()? "=="判断两个引用的是不是同一个内存地址(同一个物理对象)。 equals()判断两个字符串的值是否相等。 除非你想判断两个string引用是否同一个对象,否则应该总是使用equals()方法。 如果你了解字符串的驻留(String Interning)则会更好地理解这个问题。
- SpringMVC 登陆拦截器实现登陆控制
xp9802
springMVC
思路,先登陆后,将登陆信息存储在session中,然后通过拦截器,对系统中的页面和资源进行访问拦截,同时对于登陆本身相关的页面和资源不拦截。
实现方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23