element-UI:在el-table-column中用prop屬性來對應對象中的鍵名即可填入數據


根據elementUI中的,當el-table元素中注入data對象數組后,在el-table-column中用prop屬性來對應對象中的鍵名即可填入數據,

<el-table ref="multipleTable" :data="list" style="width: 100%" size="small" v-loading="listLoading" border
                row-key="id" :tree-props="{children: 'children',hasChildren: 'hasChildren'}" :indent="20">
        <el-table-column label="名稱" prop="name"></el-table-column>
        <el-table-column label="ID" v-if="false"></el-table-column>
        <el-table-column label="頁面路徑" prop="page"></el-table-column>
        <el-table-column label="路由" prop="path"></el-table-column>
        <el-table-column label="圖標" align="center" width="150">
          <template slot-scope="scope">
            <svg-icon v-if="scope.row.icon"  class="svg-icon-M2class" :icon-class="scope.row.icon"  />
          </template>
        </el-table-column>
<!--        <el-table-column label="順序" align="center" prop="seq" width="100">-->
<!--        </el-table-column>-->
        <el-table-column label="順序" align="center" width="100px">
          <template slot-scope="scope">{{ scope.row.seq }}</template>
        </el-table-column>
      </el-table>

當使用prop屬性時,代碼如下

<el-table-column label="順序" align="center" prop="seq" width="100">
        </el-table-column>

當不適用prop屬性時代碼如下:

<el-table-column label="順序" align="center" width="100px">
          <template slot-scope="scope">{{ scope.row.seq }}</template>
        </el-table-column>

兩相比較,使用prop屬性時,代碼簡潔很多。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM