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重新渲染。(个人猜想!)

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