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

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

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

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

　　

原文出處：https://www.cnblogs.com/ifannie/p/11347202.html