ant-design-vue版本：~1.3.8

需求：表格實現跨行合并，并且在合并完的單元格中顯示圖片

效果圖：

源碼：

export default { data() { return { pic95: require(’@/assets/produit/95.png’), pic99: require(’@/assets/produit/99.png’), varTable: {cloumns: [ { title: ’置信度’, dataIndex: ’confidence ’, class: ’confidence’, customRender: (value, row, index) => { let obj = { children: ’’, attrs: {} } if (index === 0) { obj = {children: <div class='risk-pic'><img src={this.pic95} /></div>,attrs: { rowSpan: 4 } } } if (index === 4) {obj = {children: <div class='risk-pic'><img src={this.pic99} /></div>,attrs: { rowSpan: 4 }} } if ([1, 2, 3, 5, 6, 7].indexOf(index) !== -1) { obj.attrs.colSpan = 0 } return obj } }, { title: ’天數’, dataIndex: ’window_length’, width: ’25%’, customRender: (text) => text + ’日’ }, { title: ’VaR(萬元)’, dataIndex: ’var’, width: ’25%’ }, { title: ’VaR/凈資產’, dataIndex: ’var_rate’, width: ’25%’, customRender: (text) => fmtRatio(text, 2) }],data: [ {window_length: 1, var: 151.69, var_rate: 0.01858}, {window_length: 5, var: 298.94, var_rate: 0.03661}, {window_length: 10, var: 416.70, var_rate: 0.05104}, {window_length: 20, var: 576.04, var_rate: 0.07055}, {window_length: 1, var: 370.64, var_rate: 0.045398}, {window_length: 5, var: 463.33, var_rate: 0.056751}, {window_length: 10, var: 632.91, var_rate: 0.077523}, {window_length: 20, var: 1233.95, var_rate: 0.15114}] } } }, methods:{ // 百分數設置 fmtRatio(val, index, def) { // index默認值為2 var index = arguments[1] ? arguments[1] : 2 if (val == null || isNaN(val) || typeof (val) === ’string’ && val === ’’) {return def || ’--’ } var ratio = (val * 100).toFixed(index) return ratio + ’%’ } }}

導入圖片的方式還有

import pic95 from ’@/assets/produit/95.png’

import pic99 from ’@/assets/produit/99.png’

如果有問題，歡迎提出，一起交流~~！

補充知識：ant-design vue table 可選列、自定義列實現

實現ant-design for vue 自定義列實現。點擊按鈕，彈窗顯示所有列的checkbox，選擇checkbox，確定即可實現自定義列。先上代碼

<script>/** * 該組件為實現table可選列。 * 具體操作見下方注釋。 * 全部集成原a-table功能，使用方式與原a-table完全相同，擴展增加了可選列功能 * 該組件已注冊至全局，使用方式只需將a-table變?yōu)閦yx-table即可，等等一系列原寫法不變，即可增加該功能. * 采用rander函數模式寫，為了實現a-table中slot可動態(tài)。 */export default { name: ’Table’, data () { return { modalVisible: false, // 彈窗 columns: [], // 表格的列，根據條件來操作該字段 selectList: [], // 已選擇的列 temporarySelectData: [], // 暫時選擇的列，點擊checkbox暫存到該字段，點確定同步到selectList checkboxList: []// checkbox的list，也做總數據來使用 } }, mounted () { /** * 掛載后，將原columns復制到本頁columns，checkboxList * 將selectList賦值全選狀態(tài) */ this.columns = this.deepClone(this.$attrs.columns) this.checkboxList = this.deepClone(this.$attrs.columns) this.selectList = this.columns.map(ele => ele.dataIndex) }, methods: { /** * 打開modal，將checkbox默認值或者是選擇值（暫存）重新賦值 */ handelOpenSelect () { this.temporarySelectData = this.deepClone(this.selectList) this.modalVisible = true }, /** * 點擊確定，將暫存值賦值（temporarySelectData）給已選擇的列（selectList） * 將列（columns）根據已選擇的列（selectList）篩選出來 */ handleOk () { this.selectList = this.deepClone(this.temporarySelectData) this.modalVisible = false this.columns = this.checkboxList.filter(ele => this.selectList.includes(ele.dataIndex)) }, handleCancel () { this.modalVisible = false }, handelChange (e) { this.temporarySelectData = this.deepClone(e) }, deepClone (target) { let result if (typeof target === ’object’) { if (Array.isArray(target)) { result = [] for (const i in target) { result.push(this.deepClone(target[i])) } } else if (target === null) { result = null } else if (target.constructor === RegExp) { result = target } else { result = {} for (const i in target) { result[i] = this.deepClone(target[i]) } } } else { result = target } return result } }, render () { const props = { ...this.$attrs, ...this.$props, ...{ columns: this.columns } } const on = { ...this.$listeners } const slots = Object.keys(this.$slots).map(slot => { return ( <template slot={slot}>{ this.$slots[slot] }</template> ) }) const table = ( <a-table props={props} scopedSlots={ this.$scopedSlots } on={on} ref='zyxTable'> {slots} </a-table> ) const changeDiv = ( <a-button size='small' onClick={this.handelOpenSelect}>列</a-button> ) const checkboxArr = [] for (let i = 0; i < this.checkboxList.length; i++) { checkboxArr.push(<a-col span={8}><a-checkbox value={this.checkboxList[i].dataIndex}>{this.checkboxList[i].title}</a-checkbox></a-col>) } const modal = ( <a-modal visible={this.modalVisible} onOk={this.handleOk} onCancel={this.handleCancel}> <a-checkbox-group value={this.temporarySelectData} onChange={this.handelChange}> <a-row> {checkboxArr} </a-row> </a-checkbox-group> </a-modal> ) return ( <div class='zyx-table'> { table } { changeDiv } { modal } </div> ) }}</script><style lang='less' scoped>.zyx-table{ position: relative; margin-top: 20px; .select-columns{ position: absolute; right: 0; top: -30px; }}.ant-row{ width: 100%; .ant-col-8{ margin-bottom: 10px; }}.ant-checkbox-group{ width: 100%;}</style>

該組件二次封裝了a-table，集成原a-table所有方法

使用方法，在全局注冊該組件，將原a-table替換為zyx-table即可實現。

將原標簽替換為rander函數，是為了實現slot動態(tài)傳入的效果。

有疑問或者更好的建議，歡迎光臨思密達。github傳送門

以上這篇antd vue table跨行合并單元格,并且自定義內容實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。