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

henry14 发布于2019-08-26 13:30 / 2991人阅读

摘要：一封装的组件定义表格高度全屏增加前台分页功能。表格内编辑后，自动选中该行。单元格内数据样式单元格内按钮，可多个。触发组件绑定函数，参数按钮名称，按钮样式，按钮事件标识。单元格是否可点击的判断函数，可进行复杂的函数判断。

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。

六、组件截图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108939.html

支持多框架的组件库KPC 1.0正式发布

摘要：自从年月份对外公布以来，已经经过了个月的迭代，期间发布了几十个正式版本，但一直没有到，因为我们觉得是个里程碑版本，我们必须做的足够完善才敢称之为。自从17年11月份对外公布以来，KPC已经经过了8个月的迭代，期间发布了几十个正式版本，但一直没有到1.0，因为我们觉得1.0是个里程碑版本，我们必须做的足够完善才敢称之为1.0。而如今我们有信心对外宣布：KPC 1.0终于来了！其实距离...

刘厚水 2019-08-26 10:10 评论0 收藏0
步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

Imfan 2019-08-02 11:51 评论0 收藏0
步步向前之Element-UI

摘要：无效方案根据交易所小时成交量占比和实时价格加权计算得到渲染结果是一个包含了文字，同时有名为的，并无小图标，后边中括号结构里只能有一个有待考证。 Table 固定表头只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。例如： ... 这里文档只给了一种固定高度250px的解决方案，实际应用大多数是需要自适应占满父元素，超出滚动固定表头的...

ZoomQuiet 2019-08-29 17:08 评论0 收藏0