草庐IT

custom-element

全部标签

前端枚举enum的应用(Element)封装

什么是枚举Enum枚举Enum是在众多语言中都有的一种数据类型,JavaScript中还没有(TypeScript有)。用来表示一些特定类别的常量数据,如性别、学历、方向、账户状态等,项目开发中是很常用的。Text文字(界面显示)key编码(编码、存储使用)数字value值(存储使用)男male/man/nan1女female/woman/nv2其他other3如上表中的性别枚举结构,前端页面上显示文字男、女,代码中一般使用编码key,后端数据库存储可能会用编码key,也可能用数字value值。用数字存储,占用空间会更小,还能用位运算存储多个值(算是稍微高级一点的玩法了)。前端应用场景表格数据

基于element-ui进行二次封装的表格组件

@description表格组件*@fileNameTableList.vue*@authorQ*@date2021/05/1515:13:45-->class="table-container">tablev-if="showTable"ref="filterTable":span-method="spanName?objectSpanMethod:null":data="data":show-summary="showSummary.show?showSummary.show:null":summary-method="showSummary.show?summaryMethod:null

基于element-ui进行二次封装的表格组件

@description表格组件*@fileNameTableList.vue*@authorQ*@date2021/05/1515:13:45-->class="table-container">tablev-if="showTable"ref="filterTable":span-method="spanName?objectSpanMethod:null":data="data":show-summary="showSummary.show?showSummary.show:null":summary-method="showSummary.show?summaryMethod:null

第三方组件element-ui

第三方组件element-ui组件间的传值组件可以由内部的Data提供数据,也可以由父组件通过prop的方式传值。兄弟组件之间可以通过Vuex等统一数据源提供数据共享。由data提供数据:{{title}}{{score}}exportdefault{name:"Movie",data:function(){return{title:"金刚",score:"3"}}}通过props传值,props声明的是自定义的属性,其对应一个列表,可以任意定义属性的名称,然后其他组件就可以使用这个属性并且赋值了,并且这个值会被传递会父组件,而且这个属性可以被渲染到模板里面(template)去。多组数据的情

第三方组件element-ui

第三方组件element-ui组件间的传值组件可以由内部的Data提供数据,也可以由父组件通过prop的方式传值。兄弟组件之间可以通过Vuex等统一数据源提供数据共享。由data提供数据:{{title}}{{score}}exportdefault{name:"Movie",data:function(){return{title:"金刚",score:"3"}}}通过props传值,props声明的是自定义的属性,其对应一个列表,可以任意定义属性的名称,然后其他组件就可以使用这个属性并且赋值了,并且这个值会被传递会父组件,而且这个属性可以被渲染到模板里面(template)去。多组数据的情

【云原生】Kubernetes CRD 详解(Custom Resource Definition)

一、概述CRD(CustomResourceDefinition) 本身是一种Kubernetes内置的资源类型,即自定义资源的定义,用于描述用户定义的资源是什么样子。CRD的相关概念:CRD是 v1.7+新增的无需改变代码就可以扩展KubernetesAPI的机制,用来管理自定义对象。它实际上是ThirdPartyResources(TPR)的升级版本,而TPR已经在v1.8中删除。从Kubernetes的用户角度来看,所有东西都叫资源Resource,就是Yaml里的字段Kind的内容,例如Service、Deployment等。除了常见内置资源之外,Kubernetes允许用户自定义资源

【云原生】Kubernetes CRD 详解(Custom Resource Definition)

一、概述CRD(CustomResourceDefinition) 本身是一种Kubernetes内置的资源类型,即自定义资源的定义,用于描述用户定义的资源是什么样子。CRD的相关概念:CRD是 v1.7+新增的无需改变代码就可以扩展KubernetesAPI的机制,用来管理自定义对象。它实际上是ThirdPartyResources(TPR)的升级版本,而TPR已经在v1.8中删除。从Kubernetes的用户角度来看,所有东西都叫资源Resource,就是Yaml里的字段Kind的内容,例如Service、Deployment等。除了常见内置资源之外,Kubernetes允许用户自定义资源

Element Table 业务封装与思考

前言新项目ElemnetUI组件业务封装,封装需求满足后期不修改业务代码,直接更新前端的封装组件的UI库代码即可实现无缝切换UI库的需求。目前新项目的功能产品还在梳理,项目第一期还未开始,前端技术小组先行进行的组件封装。Table组件封装目标封装的用法要和ElementUITable组件的用法保持一致目的是降低引用(使用)成本支持纯数据绑定支持自定义模板满足业务定制化需求Table组件封装内容目录结构components封装组件目录talbeIndex.vueTableColumn.vueViewsCenterPage.vue组件调用层table/Index.vue这个文件默认封装了el-ta

Element Table 业务封装与思考

前言新项目ElemnetUI组件业务封装,封装需求满足后期不修改业务代码,直接更新前端的封装组件的UI库代码即可实现无缝切换UI库的需求。目前新项目的功能产品还在梳理,项目第一期还未开始,前端技术小组先行进行的组件封装。Table组件封装目标封装的用法要和ElementUITable组件的用法保持一致目的是降低引用(使用)成本支持纯数据绑定支持自定义模板满足业务定制化需求Table组件封装内容目录结构components封装组件目录talbeIndex.vueTableColumn.vueViewsCenterPage.vue组件调用层table/Index.vue这个文件默认封装了el-ta

element table 跨页多选

1.   2.//分页改变constonHandleCurrentChange=(val:number)=>{ tableDataChild.dataChank=multipleSelection.value; nextTick(()=>{  tableDataChild.pageNum=val;  httpType(); })};3.下次打开选中回显nextTick(()=>{  tableDataChild.data.forEach((row:any)=>{   for(letioftableDataChild.dataChank){    if(row.id==i.id){     mu