vue+element 表格formatter数据格式化并且插入html标签

最新推荐文章于 2024-04-24 10:57:24 发布

程序员冯小鱼

最新推荐文章于 2024-04-24 10:57:24 发布

阅读量879

点赞数 5

分类专栏： vue 文章标签： vue.js html elementui

本文链接：https://blog.csdn.net/weixin_42748454/article/details/135719308

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

    <el-table
      v-loading="loading"
      :data="accountList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="主键" align="center" prop="id" v-if="false" />
      <!--  :formatter="formatterDetail"  -->
      <el-table-column label="明细" align="center" prop="detail">
        <template slot-scope="scope">
            <span v-html="scope.row.detail"></span>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
    </el-table>


  methods: {
    formatterDetail(row) {
      var detailObj = JSON.parse(row.detail);
      var htm = "";
      for (var key in detailObj) {
        htm += "" + key + " ￥" + detailObj[key] + "<br/>";
      }
      return htm;
      //return <span style="color:red;>${detailObj}</span>;
    },
 
    getList() {
      this.loading = true;
      listAccount(this.queryParams).then((response) => {
        this.accountList = response.rows;
        for(var i=0;i<this.accountList.length;i++){
            this.accountList[i].detail = this.formatterDetail(this.accountList[i]);
        }
        this.total = response.total;
        this.loading = false;
      });
    },
 }