1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > antd-vue之table合并单元格

antd-vue之table合并单元格

时间:2018-11-01 02:02:37

相关推荐

antd-vue之table合并单元格

做项目需要一个合并单元格的功能,这样显示的更有条理,所以根据antd-v的文档自己琢磨出了以下方法:

首先要知道antd-v里面可以合并单元格的属性是rowSpan,所以拿它开刀……然后……上代码吧!

<template><a-table :columns="columns" :data-source="data" bordered></a-table></template><script>const renderContent = (value) => {const obj = {children: value,attrs: {},};return obj;};const data = [{key: "1",name: "John Brown",age: 32,tel: "0571-22098900",phone: 18889898989,address: "New York No. 1 Lake Park",},{key: "2",name: "John Brown",tel: "0571-220983d33",phone: 18889898888,age: 42,address: "New York No. 1 Lake Park",},{key: "3",name: "John Brown",age: 32,tel: "0575-2209890d9",phone: 18900010002,address: "Sidney No. 1 Lake Park",},{key: "4",name: "JimcRed",age: 18,tel: "0575-22090dd9",phone: 189010002,address: "London No. Lake Park",},{key: "5",name: "Jim Red",age: 11,tel: "0575d-2098909",phone: 18900010002,address: "Dublin No. 2 Lake Park",},{key: "6",name: "Jim Red",age: 11,tel: "0575d-2209909",phone: 18900010002,address: "Dublin No. 2 Lake Park",},{key: "7",name: "Jim Red",age: 11,tel: "0575d-2208909",phone: 18900010002,address: "Dublin No. 2 Lake Park",},];export default {data() {return {data,columns: [],};},created() {this.columns = [{title: "名字",dataIndex: "name",key: "name",//customRender这个函数返回要合并的数据customRender(_, row) {return {children: row.name,attrs: {rowSpan: row.nameRowSpan,},};},},{title: "地址",dataIndex: "age",key: "age",customRender(_, row) {return {children: row.age,attrs: {rowSpan: row.ageRowSpan,},};},},{title: "年龄",dataIndex: "address",key: "address",customRender: renderContent,},];this.rowSpan("name");this.rowSpan("age");},methods: {// 合并单元格,这里我抽出了一个函数,调用的时候只需要将dataIndex作为参数传入即可rowSpan(key) {let arr = this.data.reduce((result, item) => {if (result.indexOf(item[key]) < 0) {result.push(item[key]);}return result;}, []).reduce((result, keys) => {const children = this.data.filter((item) => item[key] === keys);result = result.concat(children.map((item, index) => ({...item,[`${key}RowSpan`]: index === 0 ? children.length : 0,})));return result;}, []);this.data = arr;},},};</script>

可以看到上面的rowSpan函数进行了两次reduce(归并),第一次是为了去重,返回一个去重的key的数组。第二次reduce是为了找出每个key重复的次数,并且将重复的次数记录在data数组中的的每个对象中,后面用于合并单元格。

好了,来看下效果吧!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。