故之-CSDN博客

原创使用material的cdk实现拖拽mat-table的列名改变列顺序

最近遇到这样一个需求，要拖拽表格列名改变表格顺序，本文使用material的cdk和mat-tabble实现；table-view.component.html：<div class="content"> <mat-table cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="tableDrop($event)" [dataSource]="dataSource">

2022-05-16 20:45:16 508

原创在material表格中增加一个可展开面板

大概自学什么都不是容易的事情，学习一门语言更是这样，安装pygame是我学习的一个月以来遇到的第一个不好搞定的问题，看了很多前辈的博客，大多站在一定高度，对python有一定了解后写出的。而我就想写一个最简单的做法。大致步骤如下：安装python（32bit或者64bit）-------安装pycharm（）------在pycharm里运行get-pip.py ------安装pygame...

2021-11-12 10:05:28 376

原创 2021-01-13

primeng 的p-calendar的汉化属性名类型默认值描述 selectionMode string single 定义时间选择器的选择模式single,multiple和range style string null 组件的内联样式 styleClass string null 组件的样式类 inputStyle string null 输入区域的样式 inputStyleClas

2021-01-13 16:10:17 354

原创 angular7+ 灵活组件使用@input使同一组件在不同模板（template）显示不同的内容

写项目的时候遇到一个需求：a.html中内容有两个状态，当放在edit.html中的时候，a.html是input框，当在show.html中使用a.html的时候，a.html是label。结构如图，应该是一个很简单的功能，但是因为对父子传值概念不清晰，@input使用不熟练，导致这个问题卡了一天，最后解决代码如下代码：a.html:<divclass="input"><inputpInputTextplaceholder="请输入单位名称"fo...

2020-11-20 10:56:25 296

原创 angular7+实现前端生成验证码 canvas画图

html：<li class="_3001_12_verification_code" id="loginMaskLi"> <label><input id="loginmask" type="text" placeholder="不区分大小写"> </label> <span (click) = "initVerifyCode()">获取验证码 </span> <canvas #verifyCode

2020-10-13 12:08:16 790

原创超简单的angular7点击元素改变样式（非属性指令版本）增加class

需求是点击哪个类别，哪个类别的样式变成蓝色背景，也就是给某个元素所在的li标签增加一个css类，我一开始享用属性指令来控制dom元素，但是只做到点击变色，但点击别的，已经改变颜色的并不会消失，所以我用[class]="expr"来解决，超简单！<section class="_3001_12_login_nav" id="main"> <ul class="nav" id="nav" > <...

2020-10-11 16:33:52 1155

原创 css伪类为文字前后添加线条

<div class=" margin-left-right-16" id="text-line-con"> <p >抽奖参数</p> </div><style>#text-line-con{ font-size: 12px;} #text-line-con p:before { content: ''; height: 1px; top: 50%; width: 30%; .

2020-07-08 18:46:03 1531

原创 vue+element ui 列表数据分页显示

<template> <div class="main-middle"> <div class="main-site" v-if="currentSiteData"> <group-component :style="currentPage.styles" :item="currentPage"></group-component> //显示多少个页索引是由：total和：pag.

2020-07-08 18:40:43 1313

原创 angular7 表单验证（一）-----使表单验证结果快速反馈

在使用表单验证的组件的单独样式表（css文件）或者html文件中添加<style></style>标签如下：<style> input.ng-dirty.ng-invalid {border: 2px solid #ff0000} input.ng-dirty.ng-valid {border: 2px solid #6bc520}</style><div class="form-group"> <lab

2020-05-08 19:20:28 329

原创 angular7+primeng p-table的使用

在组件的angular项目用npm安装primeng的官方包：详细做法参见官方网址：https://www.primefaces.org/primeng/showcase/#/setup在使用到p-table控件的module中导入import {TableModule} from 'primeng/table';@NgModule({ imports: [Table...

2020-05-08 16:17:36 2672

Orz3261的博客