vue封装elementui的table组件,天真设置表头完成表格内编辑，按钮，链接等功能。

vue-bxz-table

一、封装element-ui的table组件：

1. 定义表格高度全屏
2. 增添前台分页功用。
3. 自定义表头，轮回输出整体表构造。
4. 表格内编辑（输入框和下拉挑选框）。
5. 表格内自定义按钮和点击事宜。
6. 每一列增添过滤函数。
7. 可花样化数字
8. 可勾选多页内的checkbox，同时保存或删除，切换页面后保存checkbox选中状况。
9. 表格内编辑后，自动选中该行。
10. 父组件打印勾选的行。
11. 自定义排序函数，可按数字大小排序

二、码云地点：https://gitee.com/bxzxb/vue-b&＃8230;

三、装置教程

1. npm install、

四、使用申明

1. 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。


六、组件截图