分类：el-table

2021
01-21

element el-table表格的二次封装实现(附表格高度自适应)

前言在公司实习使用vue+element-ui框架进行前端开发，使用表格el-table较为多，有些业务逻辑比较相似，有些地方使用的重复性高，如果多个页面使用相同的功能，就要多次重复写逻辑上差不多的代码，所以打算对表格这个组件进行封装，将相同的代码和逻辑封装在一起，把不同的业务逻辑抽离出来。话不多说，下面就来实现一下吧。一、原生el-tbale代码——简单の封装这里直接引用官方的基础使用模板，直接抄过来(✪ω✪)，下... 继续阅读 >

2021
01-08

el-table表头根据内容自适应完美解决表头错位和固定列错位

将代码复制到指令中即可使用。通过指令方式进行调用。（使用方式<el-tablev-tableFit></el-table>）通过计算文字的宽度进行表头设置，其他内容无法计算。5000个单元格以上根据实际情况使用以上根据实际情况使用，因为单元格越多，计算时间越长。尽量使用v-if，不然有些情况下会计算错误。Vue.directive("tableFit",{//指令所在组件的VNode及其子VNode全部更新后调用。componentUpdated(el,binding,vnode){setTimeout... 继续阅读 >

2020
10-09

vue+element获取el-table某行的下标,根据下标操作数组对象方式

1.在vue中对数组中的某个对象进行操作时（替换、删除），都需要用到该对象在数组中的下标。前端代码：scope.$index：获取当前行的下标scope.row：获取当前行的对象效果图：思路：通过点击事件将该对象在数组中的下标传递到方法中，然后对数组进行操作即可根据下标删除数组中对应的对象。补充知识：vue-element-upload文件上传打开选择文件弹框前进行提示或操作在项目中使用文件上传功能时，需求是不能直接弹出弹框，要先二次确认... 继续阅读 >