el |
您所在的位置：网站首页 › cad表格怎么合并行和列 › el |
el
|
在el-table的官方组件中并没有看到具体的合并行或者列及自定义表格内容，于是就自己写了一个效果如下所示。
这种对左侧内容要求比较高，要求行合并，并要自定义一些内容。下面说一下具体方法及代码写法。 我这个表格自定义内容比较多所以自己用的时候可以按照自己的具体要求适当删改，修剪。 销售金额 销售利润 退款金额 销售合同数 代账合同客户数 账套规模 销售总金额 代账业务销售金额 工商类业务销售金额 知识产权类销售金额 套餐类销售金额 兼职会计产品销售金额 销售总利润（毛利） 代账业务销售利润 工商类业务销售利润 套餐类销售利润 知识产权类销售业务 退款总额 代账业务退款金额 工商类业务退款金额 套餐类销售退款 知识产权类退款金额 兼职会计产品退款金额 代账合同数 新签代账合同数 续费代账合同数量 续费率 代账生效客户数 账套总数 {{scope.row.id}} {{scope.row.id}} {{scope.row.id}} {{scope.row.id}} {{scope.row.id}}这是html的相关代码主要注意第一列内容 销售金额 销售利润 退款金额 销售合同数 代账合同客户数 账套规模 和第二列的自定义内容 销售总金额 代账业务销售金额 工商类业务销售金额 知识产权类销售金额 套餐类销售金额 兼职会计产品销售金额 ...在data中的return的数据就很简单了，没有没事特殊的，如下所示： return { tableData: [ { id: "12987122", name: "王小虎", amount1: "234", amount2: "3.2", amount3: 10, }, { id: "12987122", name: "王小虎", amount1: "234", amount2: "3.2", amount3: 10, }, { id: "12987122", name: "王小虎", amount1: "234", amount2: "3.2", amount3: 10, }, { id: "12987122", name: "王小虎", amount1: "234", amount2: "3.2", amount3: 10, }... ] }重要的是methods方法 methods: { objectSpanMethod({ rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex === 0) { return { rowspan: 6, colspan: 1 } } else if (rowIndex === 6) { return { rowspan: 5, colspan: 1 } } else if (rowIndex === 11) { return { rowspan: 6, colspan: 1 } } else if (rowIndex === 17) { return { rowspan: 4, colspan: 1 } } else if (rowIndex === 21) { return { rowspan: 1, colspan: 1 } } else if (rowIndex === 22) { return { rowspan: 1, colspan: 1 } }else { return { rowspan: 0, colspan: 0 } } }else{ return } } }首行的if (columnIndex === 0) {}是表示合并行的行为只在第一列进行。里面的就是自定义合并了if (rowIndex === 0) {}表示在第几行开始合并， return { rowspan: 4, colspan: 1 }表示合并几行。要注意在html的表头里绑定了 :span-method="objectSpanMethod" 这种方法。不要漏掉就可以了。只要将上面的代码复制到你需要的页面就可以达到合并行，及自定义列内容。希望对你有帮助，有问题的可以楼下留言。 |
【本文地址】
今日新闻 |
推荐新闻 |