根據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屬性時,代碼簡潔很多。