在开发的过程中遇到了这样一个需求
vue+element开发的表格,表头是不确定的,根据接口动态渲染,表数据也是根据动态的表头动态展示的
(如果动态表头不熟悉怎么操作,查看我的另外一篇文章)
element 中的table表头动态渲染

<el-table-column v-for="(item, index) in tableLabel"
                 :key="index"
                 :label="item">
 <template slot-scope="scope">
   <div v-if="editIndex === scope.$index">
     <el-input v-model="scope.row[item]"
               class="changeInput"></el-input>
   </div>
   <div v-else>
     {{scope.row[item]}}
   </div>
 </template>
</el-table-column>

一般都是用类似于scope.row.name,但是这里的name值是固定的,但是这里的item是一个变量,因此这里需要动态展示的,查了好久的资料,也没有找到办法,最后自己灵机一动,随意试了一下,居然给试出来了,使用[]中括号将变量放进去,便可以动态渲染。
这里补充一下查资料的过程中学到的
在这里插入图片描述
在这里插入图片描述
这个对象复制的涉及到深拷贝和浅拷贝等知识,准备去学习一下
感谢这两篇文章:
https://blog.csdn.net/qq_40095973/article/details/89670150
https://www.jianshu.com/p/49942a7bb39b

Logo

前往低代码交流专区

更多推荐