VUE+element table下table-column组件化渲染失败

最新推荐文章于 2024-08-15 23:24:24 发布

bloxed

最新推荐文章于 2024-08-15 23:24:24 发布

阅读量5.6k

点赞数

文章标签： vue element UI

本文链接：https://blog.csdn.net/github_37847992/article/details/88187504

版权

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