封装element-ui的table组件,灵活配置表头实现表格内编辑，按钮，链接等功能。

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。

六、组件截图