555555antdvuetable跨行合并單元格,并且自定義內容實例ant-de版本ant-de版本nvue555555555555需求：表格實現跨行合并，并且在合并完的單元格中顯示圖片效果圖：卿詒卿詒R/凈資產IB151.69m%5B29L94103416.70和嘆20357^.047J06^IB370.64454湍5E463.335磁103輕豹7.75^42031233.9515.11%etdedataetdedatareturaultvaablelou置信度',天數',equ

equassetassetduitduittitle:dataIndeclass:usto

letRendebj=ildrenfiden

idence'

(value,ndeattattattetundeldrencla

an:ndeldrencla

an:5attr5anndevaablelou置信度',天數',equ

equassetassetduitduittitle:dataIndeclass:usto

letRendebj=ildrenfiden

idence'

(value,ndeattattattetundeldrencla

an:ndeldrencla

an:5attr5anndendetitle:dataIndewidth:enc@(tetext555555555555萬元va'ti,tle:dataIndewidth:萬元vatitle:'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默認值為2varindex=arguments[1]?arguments[1]:2if(val==null||isNaN(val)||typeof(val)==='string'&&val===''){returndef||'--'}varratio=(val*100).toFixed(index)returnratio+'%'}}}導入圖片的方式還有importpic95from'@/assets/produit/95.png'importpic99from'@/assets/produit/99.png'如果有問題，歡迎提出，一起交流~~!補充知識：ant-designvuetable可選列、自定義列實現實現ant-designforvue自定義列實現。點擊按鈕，彈窗顯示所有列的checkbox,選擇checkbox，確定即可實現自定義列。先上代碼<script>/***該組件為實現table可選列。*具體操作見下方注釋。*全部集成原a-table功能，使用方式與原a-table完全相同，擴展增加了可選列功能*該組件已注冊至全局，使用方式只需將a-table變為zyx-table即可，等等一系列原寫法不變，即可增加該功能*采用rande函數模式寫，為了實現a-table中slot可動態。*/exportdefault{name:'Table',data(){return{modalVisible:false,//彈窗columns:[],//表格的列，根據條件來操作該字段selectList:[],//已選擇的列temporarySelectData:[],//暫時選擇的列，點擊checkbox暫存到該字段，點確定同步到selectListcheckboxList:[]//checkbox的list，也做總數據來使用}},mounted(){/**掛載后，將原columns復制到本頁columns，checkboxList將selectList賦值全選狀態*/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=falsethis.columns=this.checkboxList.filter(ele=>this.selectList.includes(ele.dataIndex))},handleCancel(){this.modalVisible=false},handelChange(e){this.temporarySelectData=this.deepClone(e)},deepClone(target){letresultif(typeoftarget==='object'){if(Array.isArray(target)){result=[]for(constiintarget){result.push(this.deepClone(target[i]))}}elseif(target===null){result=null}elseif(target.constructor===RegExp){result=target}else{result={}for(constiintarget){result[i]=this.deepClone(target[i])}}}else{result=target}returnresult}},render(){constprops={...this.$attrs,...this.$props,...{columns:this.columns}}conston={...this.$listeners}constslots=Object.keys(this.$slots).map(slot=>{return(<templateslot={slot}>{this.$slots[slot]}</template>)})consttable=(<a-tableprops={props}scopedSlots={this.$scopedSlots}on={on}ref="zyxTable">{slots}</a-table>)constchangeDiv=(va-buttonclass="select-columns"size="small"onClick={this.handelOpenSele?t}>/a-button>)constcheckboxArr=[]for(leti=0;ivthis.checkboxList.length;i++){checkboxArr.push(va-colspan={8}>va-checkboxvalue={this.checkboxList[i].dataIndex}>{this.checkboxList[i].title}v/a-checkbox>v/a-col>)}constmodal=(va-modaltitle="設置列"visible={this.modalVisible}onOk={this.handleOk}onCancel={this.handleCancel}><a-checkbox-groupvalue={this.temporarySelectData}onChange={this.handelChange}><a-row>{checkboxArr}</a-row></a-checkbox-group></a-modal>)return(<divclass="zyx-table">{table}{changeDiv}{modal}</div>)}}</script><stylelang="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