組件<template><!-- fy自定義表格 --><div class="fy-table-diy-wrap"><table class="fy-table-multi-column-wrap" v-infinite-scroll="loadMore"><thead class="fy-table-multi-thead radius-ten"><tr class="status-info" v-show="isShowStatusInfo"><th colspan="5"><span class="order-status-wrap"><i class="cancel-order"></i>取消訂單</span><span class="order-status-wrap"><i class="intention-order"></i>意向訂單</span><span class="order-status-wrap"><i class="formal-order"></i>正式訂單</span></th></tr><tr class="header-bg"><slot name="header"></slot></tr></thead><!-- 置頂表格 --><slot name="sticky"></slot><!-- tbody --><slot></slot><tfoot class="fy-table-multi-column-footer"><tr v-if="tableDataList.length !== 0"></tr><tr v-else><td :colspan="headDataList.length">暫無數據</td></tr></tfoot></table><!-- 鼠標右鍵菜單 --><div><ul class="menu" id="menuId" v-show="isShowRightMenu"><li@click="handleClickTop(getTopList)"class="menu-item icon-right-arrow"v-show="isShowTop"><i class="menu-item-bg"></i>置頂</li><li@click="handleClickCancel(cancelIndex)"class="menu-item icon-right-arrow"v-show="isShowTop"><i class="menu-item-bg"></i>取消置頂</li><li:key="index"@click="clickEvent(iterm.fnName)"class="menu-item icon-right-arrow"v-for="(iterm,index) in rowClickMenus"><i class="menu-item-bg"></i>{{iterm.text}}<span class="right-arrow" v-show="iterm.secondaryMenu"></span><ul class="secondary-menu"><li:key="index"@click="clickEvent(item)"class="menu-item"v-for="(item,index) in iterm.secondaryMenu"><i class="menu-item-bg"></i>{{item}}</li></ul></li></ul></div></div> </template><script> export default {name: 'fyCustomTable',data() {return {}},props: {// 是否展示狀態信息isShowStatusInfo: {type: Boolean,default: false,},// 列表數據tableDataList: {type: Array,default: function() {return []},},// 表頭列的數據headDataList: {type: Array,default: function() {return []},},// 是否顯示右鍵菜單isShowRightMenu: {type: Boolean,default: false,},// 右鍵菜單數據rowClickMenus: {type: Array,},// 表格置頂數據getTopList: {type: Object,},// 是否顯示表格置頂isShowTop: {type: Boolean,default: false,},// 取消置頂的索引cancelIndex: {type: Number,default: null,},},methods: {loadMore() {this.$emit('load-more')},// 分發右鍵菜單的點擊事件出去clickEvent(val) {if (val) {this.$emit('right-menu-click-event', val)}},// 置頂方法handleClickTop(val) {this.$emit('handle-click-top', val)},// 取消置頂方法handleClickCancel(val) {this.$emit('handle-click-cancel', val)},}, } </script><style lang="scss"> .fy-table-diy-wrap {width: 100%;height: 100%;overflow-x: auto;.fy-table-multi-column-wrap {width: 100%;height: calc(100% - 175px);box-sizing: border-box;background: $color-fff;border-radius: 10px;border-collapse: collapse;white-space: nowrap;.fy-table-multi-thead {box-shadow: 0px 1px 0px 0px rgba(230, 230, 230, 1);tr {height: 40px;// 狀態信息&.status-info {text-align: left;.order-status-wrap {margin-right: 30px;.cancel-order,.intention-order,.formal-order {display: inline-block;width: 20px;height: 10px;margin-right: 10px;}// 取消訂單.cancel-order {background: rgba(238, 239, 240, 1);box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);border-radius: 2px;}// 意向訂單.intention-order {background: rgba(252, 244, 148, 1);box-shadow: 0px 2px 4px 0px rgba(181, 154, 63, 0.4);border-radius: 2px;}// 正式訂單.formal-order {background: rgba(255, 255, 255, 1);box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);border-radius: 2px;}}}&.header-bg {@include themify() {background: themed('table-header-background-color');}}th {padding: 0 22px;font-size: $font-size-14;font-weight: $font-weight-600;color: $color-333;text-align: left;&:first-child {padding-left: 30px;}&:last-child {padding-right: 30px;}}}}.fy-table-multi-tbody-wrap {.collapse-tr {td {&:first-child {padding-left: 30px;}&:last-child {padding-right: 30px;}}}.fy-table-multi-tr {td {padding: 0 22px;padding-bottom: 6px;font-size: $font-size-14;color: $color-333;text-align: left;&:first-child {padding-left: 30px;}&:last-child {padding-right: 30px;}}}.fy-table-multi-title {padding-top: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}tr:nth-child(2n) {padding: 10px 0;box-shadow: 0px 1px 0px 0px rgba(230, 230, 230, 1);}}// tfoot.fy-table-multi-column-footer {tr {text-align: center;height: 16px;}}}// 對齊方式.text-right {padding: 0 50px;text-align: right !important;}.text-left {text-align: left !important;}.menu {position: fixed;z-index: 999;box-sizing: border-box;font-size: $font-size-14;font-weight: $font-weight-400;border-radius: 2px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px;-o-border-radius: 2px;@include themify() {background: themed('right-click-menu-bg');border: 1px solid rgba(128, 128, 128, 0.5);border-radius: 2px;}.menu-item {display: block;position: relative;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;min-width: 158px;line-height: 28px;padding-left: 40px;position: relative;@include themify() {color: themed('table-font-color');}cursor: pointer;.menu-item-bg {position: absolute;left: 30px;top: 0;display: block;width: 1px;height: 30px;background-color: #f0f0f2;}//分組最后一個菜單選項的樣式&.menu-last-item {background: url(~@img/table/right-click-bottom.png) 30px no-repeat;}//二級菜單.secondary-menu {display: none;position: absolute;left: 160px;top: 0;@include themify() {background: themed('right-click-menu-bg');box-shadow: 4px 4px 6px themed('form-no-checked-line-color');}.menu-item {display: block;box-sizing: border-box;}}&.icon-right-arrow {position: relative;.menu-item-text {font-size: $font-size-14;@include themify() {color: themed('table-font-color');}}// 右側箭頭小圖標.right-arrow {position: absolute;right: 10px;bottom: 9px;display: inline-block;width: 0;height: 0;border-top: 5px solid transparent;border-bottom: 5px solid transparent;@include themify() {border-left: 5px solid themed('table-font-color');}}}&:hover {box-sizing: border-box;z-index: 1020;@include themify() {background: themed('right-click-menu-hover-bg');box-shadow: 1px 1px 2px themed('right-click-menu-hover-shadow'),-1px -1px 2px themed('right-click-menu-hover-shadow');}.secondary-menu {display: block;.menu-item:hover {box-sizing: border-box;display: block;@include themify() {background: themed('right-click-menu-hover-bg');box-shadow: 1px 1px 2px themed('right-click-menu-hover-shadow') -1px -1px2px themed(' right-click-menu-hover-shadow');}}}}}} } </style>

index.vue demo 實例

<template><div><fy-custom-table:isShowStatusInfo="true":cancel-index="cancelIndex":get-top-list="getTopList":head-data-list="headList":is-show-right-menu="isShowRightMenus":is-show-top="isShowTop":rowClickMenus="clickMenus":table-data-list="tbodyList"@handle-click-cancel="handleClickCancel"@handle-click-top="handleClickTop"@load-more="loadMore"@right-menu-click-event="rightMenuClickEvent"><!-- 表頭的數據 --><template slot="header"><th:class="getTdTextAlign(index+1)":key="`1${index}`":width="getTdWidth(index + 1)"v-for="(item, index) in headList">{{item.columnName}}</th></template><!-- 表格置頂數據 --><template slot="sticky"><tbody:key="`2${index}`"@click="handleClick(index)"@contextmenu.prevent="rightClick(item,index)"class="fy-table-multi-tbody-wrap top-color"v-for="(item,index) in topDataList"><tr class="collapse-tr"><td class="href-text-color fy-table-multi-title" colspan="7">{{item.title}}</td></tr><tr class="fy-table-multi-tr"><td>{{item.startPlace}}</td><td>{{item.desPlace}}</td><td>{{item.joinType}}</td><td>{{item.planNum}}</td><td class="text-right">{{item.prices}}</td><td>{{item.tag}}</td><td>{{item.word}}</td></tr></tbody></template><!-- 列表中數據 --><tbody:class="[getHightRowColor(item,index+1),isActive==index ? 'table-hightline-color' : '']":key="index"@click="handleClick(index)"@contextmenu.prevent="rightClick(item,index)"class="fy-table-multi-tbody-wrap"v-for="(item,index) in tbodyList"><tr class="collapse-tr"><td class="href-text-color fy-table-multi-title" colspan="7">{{item.title}}</td></tr><tr class="fy-table-multi-tr"><td>{{item.startPlace}}</td><td>{{item.desPlace}}</td><td>{{item.joinType}}</td><td>{{item.planNum}}</td><td class="text-right">{{item.prices}}</td><td>{{item.tag}}</td><td>{{item.word}}</td></tr></tbody></fy-custom-table></div> </template><script> export default {name: 'index',data() {return {isActive: null, // 是否顯示高亮當前行isShowRightMenus: false, // 是否顯示右鍵菜單isShowTop: true, // 是否顯示表格置頂getTopList: {}, // 獲取置頂數據topDataList: [],clickMenus: [{text: '刪除',fnName: 'delete',},],cancelIndex: null, // 取消置頂方法headList: [{columnName: '出發地',},{columnName: '目的地',},{columnName: '參團方式',},{columnName: '產品編號',},{columnName: '價格',},{columnName: '標簽',},{columnName: '文檔',},],tbodyList: [{id: 1,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭【2019年品質】新西蘭南北島12天完美穿越之旅',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 2,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 3,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 4,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 5,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 6,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 7,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 8,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 9,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 10,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 11,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 12,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 13,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 14,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},{id: 15,title:'【2019年品質】新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅，新西蘭南北島12天完美穿越之旅新西蘭',startPlace: '深圳',desPlace: '新西蘭',joinType: '出發地參團',planNum: 'XYGL',prices: '￥3,0000',tag: '出鏡',word: '行',},],}},methods: {loadMore() {console.log('觸底加載更多')},rightMenuClickEvent(val) {console.log(val, '右鍵菜單的點擊事件')},// 選中當前行高亮顏色getHightRowColor(row, index) {if (index == 1) {// 表格高亮行顏色值return 'table-hightline-color'} else if (index == 3) {return 'intention-order-status' // 意向訂單狀態} else if (index == 5) {return 'cancel-order-status' // 取消訂單}},clickEvent(val, index) {console.log(val, index, '點擊事件')},// 右鍵菜單rightClick(obj, valIndex) {var menu = document.querySelector('#menuId')menu.style.left = event.pageX + 'px'menu.style.top = event.pageY + 'px'this.isShowRightMenus = truethis.isActive = valIndexthis.getTopList = obj},// 設置寬度getTdWidth(val) {// if (val == 1) {// return '45px'// }},// 對齊方法getTdTextAlign(val) {if (val == 5) {return 'text-right'}},// 點擊線路產品標題展開第二列handleClick(val) {this.isActive = val},// 置頂方法handleClickTop(val) {this.isShowRightMenus = falsethis.isShowTop = falsethis.topDataList.push(val)},// 取消置頂方法handleClickCancel(val) {this.isShowRightMenus = falsethis.topDataList.splice(val, 1)},}, } </script><style lang="scss" > </style>

總結

以上是生活随笔為你收集整理的表格合并行_合并行table表格的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。