vue封装element |
您所在的位置：网站首页 › vue自定义表格组件 › vue封装element |
vue封装element
|
vue-bxz-table 一、封装element-ui的table组件： 定义表格高度全屏 增加前台分页功能。 自定义表头，循环输出整体表结构。 表格内编辑（输入框和下拉选择框）。 表格内自定义按钮和点击事件。 每一列增加过滤函数。 可格式化数字 可勾选多页内的checkbox，同时保存或删除，切换页面后保留checkbox选中状态。 表格内编辑后，自动选中该行。 父组件打印勾选的行。 自定义排序函数，可按数字大小排序 二、码云地址：https://gitee.com/bxzxb/vue-b... 三、安装教程npm install、 四、使用说明npm run dev 五、数据说明：1.data格式： [ { "bh": 1, "xmid": "5463562", "xmmc": "测试名称", "Nsrsbh": "325423523542352345", "dwmc": "测试单位名称", "yskze": "89787.66", "srze": "345345.35", "kcze": "56566.56", "zze": "345345", "zsfs_mc": "计算方式1", "xmxs": "在建项目" }, { "bh": 1, "xmid": "5463562", "xmmc": "测试名称", "Nsrsbh": "325423523542352345", "dwmc": "测试单位名称", "yskze": "0.00", "srze": "345345.35", "kcze": "56566.56", "zze": "345345", "zsfs_mc": "计算方式1", "xmxs": "在建项目" } ]2.columns表头数组格式： [ {name:'',desc:'sel',width:'50',type:'selection'}, {name:'编号',desc:'',width:'60',type:'index'}, {name:'名称',desc:'xmmc',tooltip:true}, {name:'计算金额',desc:'yskze',width:'150',click:true,url:'/xmtz/xmtzYskje',templet:function(d){return d.yskze=='0.00'?true:false}}, {name:'计算价款',desc:'srze',width:'150',click:true,sortable:true,url:'/xmtz/xmtzFwjsjk'}, {name:'计算税金',desc:'kcze',width:'150',style:'text-align:right;'}, {name:'唯一标识',desc:'xmid',format:true,width:'150',edit:true,editType:'input',}, {name:'计算方式',desc:'zsfs_mc',width:'150',edit:true,editType:'select',editSelOptions:[{label:'计算方式1',value:'计算方式1'},{label:'计算方式2',value:'计算方式2'}],style:'text-align:right;'}, {name:'计算属性',desc:'xmxs',width:'150',style:'color:#409EFF;text-align:center;text-decoration: underline;'}, {name:'操作',desc:'jhqsnd',width:'200',btns:[{name:'查看详情',btnType:'primary',clickType:'showXq'},{name:'编辑',btnType:'danger',clickType:'editXq'}]}, ]3.columns表头参数说明 name：'表头名称'， desc：'字段名称'， width：'单元格宽度', click：'单元格是否可点击'，触发组件绑定函数 btnClickFunc，参数{clickType:clickType,row:row} url：'点击后跳转的url' sortable：'是否可排序'， format：'金额是否格式化'， fixed：'固定列'， edit：'是否可编辑'， editType：'编辑类型',['inpput','select'] editSelOptions：'当编辑类型是select时的初始数据'。 style：'单元格内数据样式' btns：'单元格内按钮，可多个'。触发组件绑定函数 handleBtnClick，参数：{column:column,row:row,type:clickType} name：按钮名称，btnType:按钮样式，clickType:按钮事件标识。 templet：'单元格是否可点击的判断函数，可进行复杂的函数判断'。参数：本行数据row。 六、组件截图 文章来源：segmentfault，作者：yuhehanfeng。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：sean.li#ucloud.cn（邮箱中#请改为@）进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-手机广告位-内容正文底部
|
【本文地址】
今日新闻 |
推荐新闻 |