vue+element 表格formatter數據格式化並且插入html標簽

前言

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

　　　一貫思維，二者不可兼得也

 

一、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 用戶是不明白的

　　運行結果

　　

 

二、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

　　運行結果

　　

 

　三、二者結合

　　　你以為可以這樣寫

　　　

<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（） 在你請求后端數據的成功回調中調用，數組循環調用哦，因為每一行都要格式化呀

 數據格式化（格式源數據）

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式總結

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