草庐IT

el-table-column

全部标签

element UI中table操作栏更多按钮展示与折叠的实现

1、然后给大家看下动态图2、解决思路:​一开始我的第一反应就是可以手写一个定位布局来点击弹出更多按钮弹框,后面看了下elementUI文档上有个组件可以利用,那就是Popover弹出框废话不多说,直接上代码吧html代码块:el-table:data="locationList"v-loading="loading"borderclass="table"ref="multipleTable"@selection-change="handleSelectionChange"> el-table-columntype="selection"width="55">el-table-column> e

Element-Plus: el-divider 属性 颜色 虚线问题

同样忘了哪天的问题了,关于饿了么plus中el-devider样式的设置。最开始用的就是divider,但是因为某个时候(记不太清了)调样式的时候,给divider加了margin-top/bottom后,divider会变粗,还半天改不好,用了穿透也没啥用,于是暂时放弃了,改用原生的,直到后来一个场景要用dashed(虚线)效果,懒得改hr,又想起了divider,于是好好研究了下它的颜色和虚线属性,话不多说,直接上结果(这里也没啥好讲的...)线的颜色就是是border-color属性,在标签上直接设置就好线的样式(solid(默认实线)ordashed(虚线))设置border-styl

vue大数据表格上万条数据,树型表格,解决el-table表格数据量过大渲染卡死的问题,使用umy-ui的大数据表格虚拟表格虚拟滚u-table解决。

先看看效果吧,拿实例说话,直接渲染四万多条数据不分页,树形表格可以展开直接上代码:第一步:引入表格组件:自行按照官方文档引入即可第二步:具体页面实现代码:这是HTMl代码,多的不介绍,基本方法和el-atble没什么区别,只是tl-table的基础上加了几个属性,这里必须加的两个属性,不加的话无法实现虚拟表格,页面一样会卡死,第一个,use-virtual,第二个height,必须限制高度,这两个不加就是普通表格,加了之后就是虚拟表格,可以上万条数据显示,treeConfig这个参数注意,吧部分el-table里面的属性放到这个集合里面了,比如load,自己注意就行了,如果是虚拟树形表格,注意

el-date-picker设置日期默认值(当月月初至月末)

 1.ElementUI日期样式2.定义数据以及方法这里面的signDate可以赋值为空字符''或者赋值为空数组[],这里面包含两个值,一个值为开始日期,另一个值为结束日期exportdefault{data(){return{queryParams:{signDate:''},pickerOptions:{shortcuts:[{text:'最近一周',onClick(picker){constend=newDate()conststart=newDate()start.setTime(start.getTime()-3600*1000*24*7)picker.$emit('pick',[s

el-table不显示数据的问题

最近调试用element-ui中的el-table来显示数据,发现无法显示出数据,通过调试,发现后台的数据传到前台了。如图所示: 从网上收集到两种答案都不成功。一种是将element-ui的版本降级。一种是在webpack里面设置一下:vue:'vue/dist/vue.esm.js',原因是说element-ui使用的Vue版本与当前的Vue版本不一致导致的。 resolve:{ extensions:['.js','.vue','.json'], alias:{ '@':pathResolve('../src'), vue:'vue/dist/vue.esm.js', },

设置el-table表头全选框隐藏或禁用

需求:设置el-table表头的多选框隐藏或禁用,网上找的均造成即时生效,但刷新页面时页面会卡顿。 方法1:直接使用css(scoped中)设置:::v-deep.el-table__header-wrapper.el-checkbox{//display:none;//设置不成功,页面卡顿visibility:hidden;}方法2:给el-table设置表头属性header-cell-class-nameleftheaderStyle({row,column,rowIndex,columnIndex}){if(columnIndex===0){return"seltAllbtnDis";}

Cause: java.sql.SQLSyntaxErrorException: Unknown column

上线遇到一个问题###Cause:java.sql.SQLSyntaxErrorException:###Cause:java.sql.SQLSyntaxErrorException:Unknowncolumn'C.classify_sort'in'fieldlist';badSQLgrammar[];nestedexceptionisjava.sql.SQLSyntaxErrorException:Unknowncolumn'C.classify_sort'in'fieldlist']withrootcause本地服务连上本地数据库运行没有问题,但是上线之后服务器连上线上服数据出现了Caus

layui table列表下拉选操作

  列表中增加下拉选 varcolsChang=[[{type:'checkbox'},{type:'numbers',title:'序号'},{field:'id',title:'id'},{field:'reuseDegree',title:'复用度',width:110,templet:function(d){varopt='\n'if(d.reuseDegree=="新增"){opt=opt+'新增\n'+'复用\n'+'利旧\n'}elseif(d.reuseDegree=="复用"){opt=opt+'新增\n'+'复用\n'+'利旧\n'}elseif(d.reuseDegree

element ui中的el-input回车键事件

今天项目里面的登录页面,需要按键盘回车键就直接登录,但是测试的时候,按了回车键后,直接刷新页面了,这不是我想要的,之后网上查了一下代码如下:el-inputv-model="form.biz_user_password"placeholder="请输入新密码"@keyup.enter.native="keyUp('form')">el-input>上面的写法没问题,但是这样又会出现一个问题,当form表单中只有一个input框时,按回车键,页面还是刷新的。之后再查了一下,原来form表单只有一个Input框时,回车键默认为表单提交的事件所以最后的解决文案为:el-formref="form":

el-tree使用获取当前选中节点的父节点数据(开发记录)

一、前提官网上有两种办法:根据data或者key拿到Tree组件中的node(data)要获得node的key或者data。我这key设置后没有生效,采用的node获取的方法1、html部分el-treeref="tree":data="treeData"node-key="id":props="defaultProps"@node-click="handleNodeClick">/el-tree>2、data举例data(){ return{ treeData:[{ id:'11',label:'一级1'},{id:'22',label:'一级2',children:[{ id:'221