1. 程式人生 > 實用技巧 >ElementUI中 el-table-column 顯示的資料為多個返回資料的拼接

ElementUI中 el-table-column 顯示的資料為多個返回資料的拼接

遇到個問題就是其中有個要展示的資料來自介面返回的兩個欄位。

原用法是:

原以為prop=" "中只能放一個欄位的資料,想放兩個欄位資料的話,要把 <el-table-column></<el-table-column> 標籤再用 <template></template> 標籤包裹才行如下:

<el-table :data="projNameOrCodeMenuList" class="parentNode"  @row-click="chooseParentNode">
  <el-table-column  class="parentNodeColumn" prop="projectName,projectCode" label="專案名稱(程式碼)"  width="300">
      // 使用作用域插槽,可以獲取這一行返回的資料
    <template slot-scope="scope"> {{scope.row.projectName}}{{scope.row.projectCode}} </template>
  </el-table-column>
</el-table>

如上述程式碼即可實現功能,主要使用作用域插槽來實現這一需求的。

本文轉自:https://blog.csdn.net/L_WalkingPig/article/details/88725159