标签：timeInterval 00 vue weekName jobContent ant participants design place

效果图 (合并 + 点击事件)

<a-table :columns="columns" :rowKey="(record,index)=>{return index}" :pagination="false" :data-source="mapTableList()" bordered></a-table>

//columns数据
let columns = [{
            title: '#',
            dataIndex: 'weekName',
            customRender: (value, row, index) => {
                var child = this.createElementHtml(value, row)
                const obj = {
                    children: child,
                    attrs: {},
                };
                if (row.rowSpan) obj.attrs.rowSpan = row.rowSpan;
                else obj.attrs.rowSpan = 0;

                return obj;
            },
        },
        {
            title: '时段',
            dataIndex: 'timeInterval',
            // ellipsis: true,
            // with:'12%'
        },
        {
            title: '工作内容',
            dataIndex: 'jobContent',
        },
        {
            title: '参与人员',
            dataIndex: 'participants',
        },
        {
            title: '地点',
            dataIndex: 'place',
        },
        ]

//table 数据
tableList: [
                [{
                    weekName: '周一',
                    timeInterval: '09:30--11:00',
                    jobContent: '主任办公会',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周二',
                    timeInterval: '09:30--11:00',
                    jobContent: '接待马士基集团',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                },
                {
                    weekName: '周二',
                    timeInterval: '13:00--17:00',
                    jobContent: '项目评审',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                },
                {
                    weekName: '周二',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                },
                {
                    weekName: '周二',
                    timeInterval: '15:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周三',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会3',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                },
                {
                    weekName: '周三',
                    timeInterval: '15:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会3',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周四',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会4',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周五',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会5',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周六',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会6',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }],
                [{
                    weekName: '周日',
                    timeInterval: '14:30--17:00',
                    jobContent: '市十二次党代表大会选举工作领导小组工作会7',
                    participants: '程东、绿色技术发展处',
                    place: '601会议室'
                }]
            ],

//methods 方法
methods: {
        mapTableList() {
            // 二维数组添加 rowspan  并扁平化处理
            let arr = this.tableList.map((item, index) => {
                item.map(val => item[0].rowSpan = item.length)
                return item
            }).flat(Infinity)
            return arr
        },
        clickHandler(val, row) {
            alert(val, row)
            console.log(val, row, 'val,row')
        },
        createElementHtml(value, record) {
            const h = this.$createElement;//重要
            let this_ = this
            return h('p', null, [
                h('span', null, value),
                h('a-icon', {
                    //a-icon
                    attrs: {
                        type: "plus-circle"
                    },
                    class: "anticon anticon-plus-circle addIcon_",
                    on: {
                        click: function () {
                            this_.clickHandler(value, record);
                        }
                    },
                    //相当于`v-bind:style`
                    style: {
                        fontSize: '18px',
                        marginTop: '2px'
                    },
                },
                )
            ])
        }
    },

 参考链接：https://blog.csdn.net/kuangniaokuang/article/details/104673167

标签：timeInterval,00,vue,weekName,jobContent,ant,participants,design,place
来源： https://www.cnblogs.com/xuxuguaiguai/p/15910987.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。