使用element-ui的table組件時，渲染爲html格式

背景

今天在作vue的項目時，使用到 element-ui 的 table 組件，使用富文本編輯器進行新增操做後，發現 html格式 並無被識別 <br>

緣由

在 element-ui 中，table組件默認只渲染 文本格式 的內容

<div>
    <el-table :data="articlesData">
      <el-table-column prop="title" label="標題" width="140"></el-table-column>
      <el-table-column prop="body" label="內容" width="220">
      </el-table-column>
      <el-table-column prop="type" label="類別" width="80"></el-table-column>
      <el-table-column fixed="left" label="操做" width="100">
        <template slot-scope="scope">
          <el-button @click="modify(scope.row._id)" type="text" size="small">編輯</el-button>
          <el-button @click="remove(scope.row._id)" type="text" size="small">刪除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<br> ## 解決方法 觀察代碼發現，el-button使用了vue的相關標籤（***@click***），那咱們也能夠嘗試使用v-html來渲染， 首先查閱一下網上的資料，瞭解 template 的用法。 > 經過 Scoped slot 能夠獲取到 row, column, $index 和 store（table 內部的狀態管理）的數據： {{scope.row}} =>獲取整行的數據 {{scope.$index}} => 行的下標

瞭解了用法以後，接下來就模仿他的寫法在 須要進行html渲染 的列上進行修改。以下：

<el-table-column prop="body" label="內容" width="220">
        <template slot-scope="scope">
          <div v-html="scope.row.body"></div>
        </template>
      </el-table-column>

結果以下： <br>

<h3>若是以爲這篇文章對你有幫助，就給個 推薦 吧！</h3>