共计 2042 个字符，预计需要花费 6 分钟才能阅读完成。
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。
六、组件截图