antdvuetable跨行合并单元格,并且自定义内容实例

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