VUE+element table下table-column組件化渲染失敗

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>
  1. table組件使用組件化渲染,table下的組件未成功渲染,在這裏插入圖片描述
  2. scope.row[item.prop].renderer 實際對應就是一個簡單的el-input組件
  3. 解決方案:代碼:<el-table :row-key="Math.random()" ></el-table>
  4. 在table上加上隨機數
    在這裏插入圖片描述
  5. 組件渲染成功;
  6. 原因分析:
  7. 參考文檔
參數 說明 類型
row-key 行數據的 Key,用來優化 Table 的渲染;在使用 reserve-selection 功能的情況下,該屬性是必填的。類型爲 String 時,支持多層訪問:user.info.id,但不支持 user.info[0].id,此種情況請使用 Function。 Function(row)/String
  1. 源碼解析
    https://github.com/ElemeFE/element/blob/dev/packages/table/src/table.vue
    https://github.com/ElemeFE/element/blob/dev/packages/table/src/util.js
    https://github.com/ElemeFE/element/blob/dev/packages/table/src/table-body.js

  2. 隨機數更新,使dom重新渲染。(個人猜想!)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章