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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值