工作中遇到的问题8(ant-design-vue中给表格某一固定行后添加图片并且添加点击事件)

262 阅读1分钟

效果图如下所示:

image.png

分析:此需求是为了熟练地掌握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 ''
              }
            }