example:
<el-table
:data="tableData"
:row-key="Math.random()" //標記修改
stripe
style="width: 100%">
<el-table-column
v-for="item in tableHead"
:key="item.prop"
:prop="item.prop"
:label="item.label">
<template slot-scope="scope">
<el-row>
<component :is="scope.row[item.prop].renderer" :option="scope.row[item.prop]" /> //渲染組件
</el-row>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
- table組件使用組件化渲染,table下的組件未成功渲染,
- scope.row[item.prop].renderer 實際對應就是一個簡單的el-input組件
- 解決方案:
代碼:<el-table :row-key="Math.random()" ></el-table>
- 在table上加上隨機數
- 組件渲染成功;
- 原因分析:
- 參考文檔
參數 | 說明 | 類型 |
---|---|---|
row-key | 行數據的 Key,用來優化 Table 的渲染;在使用 reserve-selection 功能的情況下,該屬性是必填的。類型爲 String 時,支持多層訪問:user.info.id,但不支持 user.info[0].id,此種情況請使用 Function。 | Function(row)/String |