效果图如下所示:
分析:此需求是为了熟练地掌握ant-design-vue,table组件中一个重要的属性。customRender属性: 步骤一: 首先处理一下数据:
//封装一个递归函数处理数据
handleData1(BasicData){
for(let i=0;i<BasicData.length;i++){
if(BasicData[i].typeName=='合规性'){
BasicData[i].compareData = []
}
if(BasicData[i].typeName=='永农补划情况'){
BasicData[i].picture = 1
}
if(BasicData[i].typeName=='永农示范区补划情况'){
BasicData[i].picture = 1
}
if(BasicData[i].typeName=='疑似未批先建规模'){
BasicData[i].pdf = 1
}
if(BasicData[i].children.length>0){
this.handleData1(BasicData[i].children)
}else{
delete BasicData[i].children
}
}
},
上述操作步骤是为了再数据中加入标识,当时符合条件的数据,加入一个picture和pdf的标识,其次也处理掉数据中多余的children属性,这样展开符会少很多。
步骤二
customRender()这个有两个参数,一个是text,另一个是record,第一个是当前单元格应该渲染的数据,另一个参数是当前行的数据,
customRender: (text, record, key) => {
console.log('record', record)
if (record.picture == 1) { //拿到数据做一下验证,如果存在标识
const clickPictureWall = (e) => {
this.clickPictureWall(this.saveSchemeAndNumber[index].projectCode); //调用method里面的方法
}
return <div id="clickPictureWallId" onClick={clickPictureWall} style={`z-index:99999;cursor:pointer;width:89px;height:40px;margin:auto;background-image:url('${require("@/assets/Pointpicture.png")}')`}><span style="line-height:40px;margin-left:20px;color:#00DEFF">图片</span></div>
}
if (record.pdf == 1) {
console.log(index, "index")
// console.log('record', record)
const clickPdfShow = () => {
this.clickPdfShow(this.saveSchemeAndNumber[index].projectCode); //调用method里面的方法
}
//返回一个图片强烈关注引入图片路径的写法,和给div加上点击时间的写法
return <div id="clickPdfShowId" onClick={clickPdfShow} style={`z-index:99999;cursor:pointer;width:89px;height:40px;margin:auto;background-image:url('${require("@/assets/Pointpdf.png")}')`}><span style="line-height:40px;margin-left:20px;color:#00DEFF">PDF</span></div>
}
if (text !== null && text !== undefined) {
if (record.compareColor.length == 0) {
return <div>{{ text }}</div>
}
else if (record.compareColor[index] === 'yellow') {
return <div style="width:100px;margin:auto;"><div style="width:20px;height:20px;background:yellow;border-radius:50%;float:left;margin-left:3px"></div>{{ text }}</div>
}
else if (record.compareColor[index] === 'red') {
return <div style="width:100px;margin:auto;"><div style="width:20px;height:20px;background:red;border-radius:50%;float:left;margin-left:3px"></div>{{ text }}</div>
}
else if (record.compareColor[index] === 'blue') {
return <div style="width:100px;margin:auto;"><div style="width:20px;height:20px;background:blue;border-radius:50%;float:left;margin-left:3px"></div>{{ text }}</div>
}
} else {
return ''
}
}