表格太多复制?黏贴到头皮发麻

419 阅读2分钟

背景: 因为在供应链项目中表格需求特别多,老是ctrl+c ctrl+v到心累,感觉就算复制来也不能直接用还要改了改去贼浪费时间。因此想搞一个基于element-ui 表格组件,省去许多复制黏贴的麻烦。

使用方法: 

1. 新建一个表格字段的js文件 

const roleListCol = 
[   
 {       
      label: '角色名称',    // 表格名称
      prop: 'freightAmount',    // 后端返回的字段名
      width: 100,   // 表格定义的宽度
      isShow: true,     // 控制是否展示   
      isEdit: false     // 控制是否可编辑
},    
]

若可编辑状态 @inputBlurCallBack的方法回调有当前这一行的数据, 当前是哪一行,整个数组

emitSelectionName 属性可以设置多选时回调方法的名称,默认 'changeRow' 回调的数据和element多选时一样的

重要的属性:

1. t-column-data: 表格字段设置

2.t-data: 表格的数据

3.tHeight: 表格的高度

slot:

操作按钮slot

<div slot="operate" slot-scope="scope"></div>

自定义slot

字段中属性设置

prop: 'slot',
slotName: 'activityPrice',
<div slot="sendAddress" slot-scope="scope">自定义slot</div>

使用了两个多月了效果还行,能够满足绝大多数的需求场景,除非比较骚气的需求就没办法了QAQ 。。 比如什么每一行还有个多选框,选中全选子集 真是恶心!!

弱弱的复上gitHub地址: github.com/blilibili/e…  

觉得有用的大佬施舍个赞呗~ 虽然没啥技术含量,但是感觉真的还是能省一些功夫的


表格虽然可以不用ctrl+c ctrl+v了 但是分页还是要复制来复制去 ,因为每个人的后端接口地址又不一样,就导致每次分页都要重写一遍引入接口 头疼 这个懒不知道怎么偷 求大佬指点下~