vue+element 表格formatter數據格式化而且插入html標籤

前言

　　　vue中 element框架，其中表格組件，我既要行內數據格式化，又要插入html標籤

　　　一向思惟，兩者不可兼得也

 

1、element 表格 數據格式化

　　

　　demo

<el-table-column :prop="item.key"  v-for="item in levelName" :label="item.name" :formatter='handleSign'>
</el-table-column>

　　再寫 handleSign () 方法

//處理簽到
    handleSign(row,cellValue){
      let signInId = ''
      if(this.deviceSignList){
          this.deviceSignList.map((item,index)=>{
            if(item.signInId == row.signInId){
              signInId = "簽到"
            }else{
              signInId = "未簽到"
            }
          })
        }
        return signInId
    },

 　　

　　目的：根據不能的值，相對應處理。通常狀態會用的比較多，後臺返回來的1,2,3,4 用戶是不明白的

　　運行結果

　　

 

2、element 表格內容自定義模板

　　

　　demo

<el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <span v-html="scope.row.vdmSubjectVo.content"></span>
        <el-popover trigger="hover" placement="top">
          <p >姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>    

 　　

　　目的，表格內要顯示html標籤，就要用到template 語法，要是返回的數據中有html標籤（好比 字符串中拼接了 <span ></span>）就要用到 v-html

　　運行結果

　　

 

　3、兩者結合

　　　你覺得能夠這樣寫

　　　

<el-table-column
      label="姓名" :formatter='handleSign'
      width="180">
      <template slot-scope="scope">
        <span v-html="scope.row.vdmSubjectVo.content"></span>
        <el-popover trigger="hover" placement="top">
          <p >姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>      

 

　　可是你不能夠，由於scope.row.vdmSubjectVo.content 讀取的是表格源數據，而不是你格式化後的數據

　　解決方法

　　你只能先把表格數據格式化後，在用 template + v-html 展現出來

　　demo

　　

<el-table-column align="center" header-align="center" prop="vdmSubjectVo.content" label="內容">
                <template slot-scope="scope">
                  <span v-html="scope.row.vdmSubjectVo.content">        
                   </span>
                </template>
</el-table-column> 

數據格式化（格式源數據）       
formatterContent(cellValue){
      let content = JSON.parse(cellValue.vdmSubjectVo.content)
      let option = ''
      if(content){
        content.map((item,index) =>{
          if(item.rightAnswer){
            option = '<span style="color:red;display:inline-block">'+option + item.index + " : "+ item.content+'</span><br/>'
          }else{
            option = option + item.index + " : "+ item.content +"<br/>"
          }
        })
      }
      let options ="內容："+cellValue.vdmSubjectVo.subjectName +"<br/>"+option
      return options
    },

　　

　　目的：實現了數據格式化以及插入了html標籤

　　運行效果是這樣的：

　　

　Fannie式總結

　　這個算是工做上實際遇到的問題，問題很小。也許短路一下，就沒轉過這個彎彎