vue实现动态生成表格

生活中,最使人疲惫的往往不是道路的遥远,而是心中的郁闷;最使人痛苦的往往不是生活的不幸,而是希望的破灭;最使人颓废的往往不是前途的坎坷,而是自信的丧失;最使人绝望的往往不是挫折的打击,而是心灵的死亡。所以我们要有自己的梦想,让梦想的星光指引着我们走出落漠,走出惆怅,带着我们走进自己的理想。

导读:本篇文章讲解 vue实现动态生成表格,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com,来源:原文

需求:
选择会计科目的时候,会查出来对应的动态表格项,在切换进行选择不同的会计科目时,动态对应展示对应的动态表格项,且该动态表格实现下拉框选择不同的数据。
eg1:选择第一行会计科目,接口查出来有两个动态表格项
在这里插入图片描述eg2:选择第二行会计科目,接口查出来有三个动态表格项
在这里插入图片描述html代码:

<template>
      <div class="boxShadow">
          <div style="margin-top: 20px">
              <el-table
                      :data="dynamicTable" ref="multipleTable"
                      style="width: 100%" border tooltip-effect="dark">
                  <template v-for='(col) in dynamicTableCol'>
                      <el-table-column :label="col.chrName1" :prop="col.chrCode1" :key="col.chrCode1">
                          <template slot-scope="scope">
                              <el-select v-model="col.vModelData" @change="getNowSelData($event,col.chrName1)">
                                  <el-option :label="item.chrName" :value="item.chrCode" v-for="(item, index) in col.dynamicAllDatas" :key="index"></el-option>
                              </el-select>
                          </template>
                      </el-table-column>
                  </template>
              </el-table>
          </div>
      </div>
  </template>

vue中的data:
在这里插入图片描述
js代码:
1、点击树形会计科目的时候 绑定@node-click=”handleNodeClick3″方法(注释掉的可不看)
在这里插入图片描述2、点击动态表格的时候绑定@change=”getNowSelData($event,col.chrName1)”事件
在这里插入图片描述3、focus会计科目的时候通过缓存展示之前不同会计科目所选的动态表格项

@focus=“selTableRow2(scope.$index)”
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/137395.html

(0)
飞熊的头像飞熊bm

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!