vue项目动态表格渲染，表格编辑，上传文件，多table表格展示

最新推荐文章于 2024-07-06 12:25:49 发布
置顶 最新推荐文章于 2024-07-06 12:25:49 发布
阅读量1.9k 收藏 7
点赞数 3
分类专栏： vue #动态表格 文章标签： vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45118394/article/details/113634777
版权

vue项目动态表格渲染，表格编辑，上传文件，多个table表格展示等（具体见代码）分享给有需要的家人们

效果图

页面代码

template

<template>
  <div>
   <el-header style="height:50px">
      <el-row :gutter="10">
        <el-row
          type="flex"
          class="row-bg"
          justify="space-between"
        >
          
          <el-col :span="6"></el-col>
          <el-col :span="6" style="text-align: right"><el-button type="success" icon="el-icon-circle-check" @click="save">保 存</el-button></el-col>
        </el-row>
      </el-row>
    </el-header>

 <el-tabs v-model="activeName" type="border-card"  @tab-click="tabsClick">
    <!-- 动态tabs 渲染 -->
   <el-tab-pane
    :key="item.id"
    v-for="(item, index) in editableTabs"
    :label="item.lable"
    :name="item.name"
    >

  <el-form :model="ruleForm.tbody" >
     <!-- ruleForm因为会有多个表格，ruleForm是一个数组，里面每个对象对应的是一个独立的table数据-->
      <div
        v-for="(item1, index) in ruleForm"
        :key="index"
        style="margin-bottom: 30px"
      >
      <!-- 分类标题 -->
      <p style="margin: 0;
            line-height: 35px;
            background: rgba(223, 223, 223,0.3);
            border-radius: 6px 6px 0 0;
            font-weight: 700;
            text-align:center;
            color: #888;">{{item1.stutas.name}}</p>
      <!-- 动态table表格 渲染 --> 
      <!-- thead是表格的表头数据，，thead是一个数组，里面每个对象对应的是表头数据-->
      <!-- tbody是表格的单元格数据，这里把所有数据放在一起（一个对象中），类似vue的双向数据绑定，这样方便提交form表单，避免多个表单逐个提交 -->
        <el-table
          :data="item1.tbody"
          stripe
          border
          style="width: 100%"
          size="mini"
          
        >
         
          <div v-for="(item2, i) in item1.thead" :key="i" >
            <!-- 动态表头渲染 --> 
            <el-table-column :label="item2.annotationFields" min-width="250" align="center">
              <template slot-scope="scope">
                <!-- 动态单元格数据渲染 --> 
                <el-form-item :prop="item2.fieldName" >
                  <!-- 根据表头data数据类型不同，在页面中展示不同控件，也可以做是否必填项的表单验证 -->


                  <!-- 考虑到数据类型可能是下拉框格式，这里就需要动态获取下拉框数据 -->
                  <!-- 因为动态数据原因item2.fieldName是动态，这里使用作用域插槽就需要注意 可写scope.row[item2.fieldName] -->
                   <el-select
                    :ref="item2.fieldName"
                    v-if="item2.data == 1"
                    @visible-change="visibleChange($event,item2.annotationFields, item2.fieldName)"
                    v-model="scope.row[item2.fieldName]"
                    placeholder="请选择">
                    <el-option
                      v-for="(item, index) in options"
                      :key="index"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>


                   <!-- 数据类型可能是上传图片的情况，简单封装elementUI 的上传文件控件-->
                  <!-- <div class="block" v-else-if="item2.data == 2">
                   <uploadFileByPicture :fieldName="item2.fieldName" :srcList="change(scope.row[item2.fieldName])"  @uploadFile="uploadFile"></uploadFileByPicture>
                  </div> -->

                  <div class="block" v-else-if="item2.data == 3">
                    <el-input
                      type="textarea"
                      :rows="2"
                      v-model="scope.row[item2.fieldName]">
                    </el-input>
                    <el-input type="file" v-model="scope.row[item2.fieldName]" ></el-input>
                  </div>
               
                  <div class="block" v-else-if="item2.data ==4">
                    <el-input
                      type="textarea"
                      :rows="2"
                      v-model="scope.row[item2.fieldName]">
                    </el-input>
                    <el-input type="file" v-model="scope.row[item2.fieldName]" ></el-input>
                  </div>
                  <el-select
                    v-else-if="item2.data == 6"
                    v-model="scope.row[item2.fieldName]"
                    placeholder="请选择">
                  </el-select>
                 
                 
                  <el-input
                    v-else
                    v-model="scope.row[item2.fieldName]"
                    :disabled="item2.fieldName == 'Code_credit' || item2.fieldName == 'Code_org' ? true : false"
                    clearable
                  ></el-input>
                  

                  
                  <!-- <el-tag>{{split(scope.row,item2.porp)}}</el-tag> -->
                </el-form-item>
              </template>
            </el-table-column>
          </div>
      </el-table>
      </div>
  </el-form>



 </el-tab-pane>
</el-tabs>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

data

data() {
    return {
      ip:"http://192.168.3.80:9090/static/",
       activeName: '任务一', 
       clickTabsName:"",
       videoFlag: false,
       dialogVisible: false,
       tableHeight: null,
       //是否显示进度条
       videoUploadPercent: "",
       //进度条的进度，
       isShowUploadVideo: false,
       selectObj: { companypolicy_tzvoc: [] },
       //显示上传按钮
       videoForm: {
           showVideoPath: ''
         },
      dialogImageUrl: '',
      ruleForm:[
          {
            stutas: {
              id: 5868,
              name: "基本信息",
            }, //分类
            thead: [
              {
                annotationFields: "单位详细名称",
                fieldName: "Code_credit",
                fieldType: "varchar(128)",
                fieldTypeId: "18",
                fieldTypeName: "企业基本信息",
                id: 2032,
                data:1,
                isNull: "DEFAULT NULL",
              },
              {
                annotationFields: "大师傅范德萨",
                fieldName: "Contact_name",
                fieldType: "varchar(32)",
                fieldTypeId: "18",
                fieldTypeName: "企业基本信息",
                id: 2033,
                data:1,
                isNull: "NULL",
              },
              {
                 annotationFields: "组织机构代码",
                 fieldName: "Code_org",
                 fieldType: "varchar(128)",
                 fieldTypeId: "18",
                 fieldTypeName: "企业基本信息",
                 id: 2034,
                 data:1,
                 isNull: "DEFAULT NULL",
              },
              {
                 annotationFields: "手机号",
                 fieldName: "Contact_phone",
                 fieldType: "varchar(32)",
                 fieldTypeId: "18",
                 fieldTypeName: "企业基本信息",
                 id: 2035,
                 isNull: "DEFAULT NULL"
              },
              {
                  annotationFields: "单位地址",
                  fieldName: "District",
                  fieldType: "varchar(128)",
                  fieldTypeId: "18",
                  fieldTypeName: "企业基本信息",
                  id: 2032,
                  isNull: "DEFAULT NULL",
              }
              ,
              {
                  annotationFields: "单位地址",
                  fieldName: "District",
                  fieldType: "varchar(128)",
                  fieldTypeId: "18",
                  fieldTypeName: "企业基本信息",
                  id: 2032,
                  isNull: "DEFAULT NULL",
              },
              
            ],
            tbody: [
              {
                Boil_turb_YN: "1",
                City: "安庆市",
                Clinker_YN: "否",
                Code_credit: "913408227049401051()",
                Code_org: "704940105()",
                Coking_YN: "否",
                Contact_name: "吴邵明",
                Contact_phone: "13805564798",
                District: "怀宁县",
              },
            ],
          },

           {
            stutas: {
              id: 15868,
              name: "特殊信息",
            }, //分类
            thead: [
              {
                annotationFields: "单位详细名称",
                fieldName: "Code_credit",
                fieldType: "varchar(128)",
                fieldTypeId: "18",
                fieldTypeName: "企业基本信息",
                id: 2032,
                isNull: "DEFAULT NULL",
              },
              {
                annotationFields: "大师傅范德萨",
                fieldName: "Contact_name",
                fieldType: "varchar(32)",
                fieldTypeId: "18",
                fieldTypeName: "企业基本信息",
                id: 2033,
                isNull: "NULL",
              },
              {
                 annotationFields: "组织机构代码",
                 fieldName: "Code_org",
                 fieldType: "varchar(128)",
                 fieldTypeId: "18",
                 fieldTypeName: "企业基本信息",
                 id: 2034,
                 isNull: "DEFAULT NULL",
              },
              {
                 annotationFields: "手机号",
                 fieldName: "Contact_phone",
                 fieldType: "varchar(32)",
                 fieldTypeId: "18",
                 fieldTypeName: "企业基本信息",
                 id: 2035,
                 isNull: "DEFAULT NULL"
              },
              {
                  annotationFields: "单位地址",
                  fieldName: "District",
                  fieldType: "varchar(128)",
                  fieldTypeId: "18",
                  fieldTypeName: "企业基本信息",
                  id: 2032,
                  isNull: "DEFAULT NULL",
              }
              ,
              {
                  annotationFields: "单位地址",
                  fieldName: "District",
                  fieldType: "varchar(128)",
                  fieldTypeId: "18",
                  fieldTypeName: "企业基本信息",
                  id: 2032,
                  isNull: "DEFAULT NULL",
              },
              
            ],
            tbody: [
              {
                Boil_turb_YN: "1",
                City: "安庆市",
                Clinker_YN: "否",
                Code_credit: "913408227049401051()",
                Code_org: "704940105()",
                Coking_YN: "否",
                Contact_name: "吴邵明",
                Contact_phone: "13805564798",
                District: "怀宁县",
              },
            ],
          },
        ],
      editableTabs: [
        {
          name: '任务一',
          lable: '任务一',
          id: 0,
        },
        {
          name: '任务二',
          lable: '任务二',
          id: 1,
        },
        {
          name: '任务三',
          lable: '任务三',
          id: 2,
        }
      ],
      // editableTabs: [
      //   {
      //     name:"数据加载中...",
      //     id:0
      //   }
      // ],
      rules: {
        Code_credit: [
          { required: true, message: "统一社会信用代码", trigger: "blur" },
        ],
      },
      removeSealDescriptionIdArray: [], //要删除的table每一行 的SealDescriptionId数组
      
      tabID:0,
      urlData:{},
      dataId:'',
      options:''
      
    };
  },

methods

methods: {
    
 //tab且切换
 tabsClick(tab, event) {
      this.activeName = tab.name
      this.tabID = tab.index
      this.clear()
      this.getParams(tab.index)
      // this.clickTabsName = tab.name
      // this.getParams(tab.name)
    },
//获取下拉框数据
     visibleChange(flag,label, fieldName) {
     this.options=''
      if (!flag || this.selectObj[fieldName].length != 0) {
        return false;
      }
      //this.$refs[fieldName][0].placeholder = "加载中";
      let params = {
        dictionaryName: label,
      };
      
      this.axios
        .post("/dictionaryInfo/queryDictonary", params)
        .then(({ data: res }) => {
          console.log(res,222);
          if (res.data.list.length != 0) {
            if (res.data.list[0].children.length != 0) {
              let array = res.data.list[0].children;
              let resultList = [];
              for (let index = 0; index < array.length; index++) {
                let item = array[index];
                resultList.push({
                  label: item.dictionaryName,
                  value: item.dictionaryName,
                });
              }
              //this.$refs[fieldName][0].placeholder = "请选择";
              this.options = resultList;
             
            } else {
              //this.$refs[fieldName][0].placeholder = "不存在下拉数据";
              this.$notify({
                title: "警告",
                message: "不存在下拉数据",
                type: "warning",
                duration: 1500,
                position: "bottom-right",
              });
            }
          } else {
            //this.$refs[fieldName][0].placeholder = "不存在下拉数据";
            this.$notify({
              title: "警告",
              message: "不存在下拉数据",
              type: "warning",
              duration: 1500,
              position: "bottom-right",
            });
          }
        });
         this.$forceUpdate();
    },
    uploadFile(val){
         console.log(val.fieldName,val.list);
         this.urlData[val.fieldName] = val.list.toString()
         
    },
    change(e) {
      if (e) {
        return e.split(',')
      }else{
        return []
      }
      
    },
    split(row, item) {
      let value;
      Object.keys(row).forEach((v) => {
        if (item == v) {
          value = row[v];
          // console.log(row[v]);
        }
      });
      return value;
    },
    delSealRow(a, b) {
      console.log(a, b);
    },

    handleChange(file){
      console.log(file);
    
    },

    handleRemove(file) {
        //console.log(file);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        ///console.log(file);
      },

       handlePreview(file) {
              
       },
       beforeRemove(file) {
              
       },   
       handleExceed(file) {
              
       },   
       
       //sp上传前回调
       beforeUploadVideo(file) {
                var fileSize = file.size / 1024 / 1024 < 50;
                if (['video/mp4', 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov'].indexOf(file.type) == -1) {
                    layer.msg("请上传正确的视频格式");
                    return false;
                }
                if (!fileSize) {
                    layer.msg("视频大小不能超过50MB");
                    return false;
                }
                this.isShowUploadVideo = false;
       },
       //进度条
       uploadVideoProcess(event, file) {
                this.videoFlag = true;
                this.videoUploadPercent = file.percentage.toFixed(0) * 1;
       },
       //上传成功回调
       handleVideoSuccess(res, file) {
                this.isShowUploadVideo = true;
                this.videoFlag = false;
                this.videoUploadPercent = 0;
                
                //前台上传地址
                //if (file.status == 'success' ) {
                //    this.videoForm.showVideoPath = file.url;
                //} else {
                //     layer.msg("上传失败，请重新上传");
                //}

                //后台上传地址
                if (res.Code == 0) {
                    this.videoForm.showVideoPath = res.Data;
                } else {
                    layer.msg(res.Message);
                }
       },




      
  },

提示

这里数据是假数据，工作中需要调接口拿数据，家人们把数据处理一下就可以了，直接methods不用写 也能通过假数据实现动态的效果，methods里面的方法在实际项目中可能需要的，仅供参考，如有其他需求疑问欢迎留言讨论

維他命～
关注
专栏目录
vue项目多表格展示小技巧（tableAny）
qq_873366938的博客
06-29 4670
Vue多表格展示及导出 1.设计背景：在有限的容器内展示以多表格形式展示数据，不能使用单一表格绘制添加滚动轴 2.期望效果 3.需求分析： 1.在有限的容器内使用table组件但，但渲染成本回大大增加，table:表头+数据； 2.替代方案，前端仿写成表格样式，但采用简单的dom绘制。 对比：方案2更具灵活性，且渲染成本回大大降低。可控制性增加 4.实现思路： 1.表格数据一般由两部分构成，但目前形式下 推荐使用一个list返回，这种方式后台也会很喜欢 list{“xx”:xx,…}. 2.数据解构，分离出
vue elementui table 多个表格table合并、多个合并列
DarlingYL的博客
06-29 2584
vue elementui table 多个表格table合并、多个合并列
vue中用Element-ui封装表格(table)组件动态渲染数据展示
最新发布
weixin_53541596的博客
07-06 465
Vue中使用Element-ui封装表格(table)组件动态渲染数据展示
vue.js 使用v-for 循坏的多个table 如何去区分
songqiu821的博客
07-08 3323
在项目中遇到这样一个问题，同一个页面上有多个table，这多个table是使用v-for循环出来的，每个table中都有一个颜色变色器，修改每个table的颜色变色器 ，保存的时候发现修改后的颜色没有保存成功，经过测试发现修改每个table的颜色变色器时，不知道修改的是哪个table的数据，后来经过认真读取iview的文档才发现解决方法，在此记录下 。 最初是使用“颜色设置”一列 使用render函数实现的 如下代码 //使用的iview组件中的table <div v-for="(item,in
Vue el-table 多表格联合显示、合并单元格
chenacxz的博客
07-21 3448
先看内容是三个表，每个表的合并单元格都有点不同。 按照原型图给的内容，第一个是两列，有行合并和列合并，还有表头行合并。 现根据图造出mock数据，然后再写对应的代码。
vue中 table 表格进行多行合并
热门推荐
weixin_42879346的博客
07-09 1万+
一. 简介 刚入职的小白，公司目前采用的框架是 SpringBoot + Vue . 前段的UI控件是Iview。由于我们的公司Java开发是全栈的。所以前端的工作也交到了我们的手里。但是在项目开发的过程中遇到了一些问题。比如我们想要绘制出下面所示的一种表格页面。不仅需要实现单列的合并，还包括了第二列行的合并。Iview 的官方文档也并没有这种表格的展现及相应的属性。。 于是就开启了无限搜索模式...
对Vue table 动态表格td可编辑的方法详解
10-18
本文将详细介绍在Vue项目中实现table动态表格td可编辑的方法。 首先，需要明确几个关键点： 1. 使用Vue.js框架。 2. 表格使用的是elementUI组件库，这是基于Vue.js的UI框架。 3. 使用了el-table-column组件，这是...
vue+element-ui实现表格编辑的三种实现方式
10-17
在使用Vue.js框架结合Element UI组件库开发Web应用时，表格编辑功能的实现是经常遇到的需求之一。本文介绍了使用vue与element-ui实现表格编辑的三种不同方式，具体包括表格内部显示和编辑切换、通过弹出另外的表格...
canvas 绘制的 vue 表格组件，解决上万行+多列数据渲染问题，集成大部分表格功能.zip
01-04
使用此组件，开发者可以轻松地在Vue项目中实现高性能的表格渲染，无需担心性能问题，尤其是在数据量庞大的情况下。只需将数据传递给组件，组件会自动处理绘制和交互逻辑，使得开发大型数据应用变得更加容易。 综上...
vue element 中的table动态渲染实现（动态表头）
10-15
在Vue.js中，Element UI库提供了丰富的UI组件，其中`el-table`是用于展示表格数据的一个强大组件。本文将深入探讨如何在Vue Element环境中实现表格的动态渲染，特别是动态表头的功能。 首先，动态渲染的核心在于...
Vue.js实现表格渲染的方法
10-18
在处理Web应用中的表格数据展示时，Vue.js提供了非常方便的数据绑定和循环指令，使得表格渲染变得简单快捷。通过本篇内容，我们将深入了解如何利用Vue.js框架实现高效且动态的表格渲染，并探讨一些相关的技术细节和...
点击按钮，动态添加表格
08-10
通过按钮事件，实现动态添加表格元素,可以获得更多的表格
vue+ element 页面多个table 渲染错乱解决办法
weixin_43639430的博客
05-21 2072
问题前提：一个需求当前页面有一个售卡列表，一个退卡列表，当退卡数据为空，售卡有一条数据，发现售卡列表里面展示的数据是售卡里面的，比如：退卡里面有一个审核操作，售卡列表里有发放操作，预想，当售卡列表里有数据是，她的操作应该是发放，但实际结果发现，竟然显示的是审核操作，我当时就想为啥会这样呢？？ !](https://img-blog.csdnimg.cn/20210521182534652.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,
jq animate()可以使用的属性_使用VUE一年后
weixin_39832965的博客
11-22 219
从去年年底开始接触VUE，到现在已经整整一年了。这也是我接触的第一个MVVM的框架。在这之前，我也是长期执迷于JQ大法，在项目中尝试过一些常见的UI框架:MiniUI 这是一个很好用的框架，可惜收费较贵，排除这一点，肯定是JQ时代的首选EasyUI 用过一次，复杂的API设计让我败下阵来Bootstrap 上手快，文档详细，但交互上太弱LayUI 近几年新出来的框架，功能丰富，接口简洁，很值得一试...
基于vue通用模板渲染Table
LSFQ的博客
05-19 1042
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
Vue关于使用transition-group做列表自上而下动画渲染
weixin_54129994的博客
07-20 648
<div class="listContainer"> <transition-group class="ys-notices" name="transition1"> <div class="dataContainer" v-for="(item) in listData" :key="item.id"> <div class="dataContent"> <di.
element表格之表头代码改进
S2763427717的博客
08-31 222
element表头代码改进
vue移动端 表格 数据渲染
孙少的博客
02-01 841
vue移动端 表格 数据渲染
【基于vue的大量表单数据，动态生成表单性能优化篇】解决输入延迟，卡顿问题
weixin_41308436的博客
11-19 6314
需求分析 需求：根据后端返回的字段，生成多条表单数据( 实质是批量发布商品 )，预留可增删改功能 实现思路 后端返回的数据格式是一个一维数组（一个商品的所有字段） let product_item = [ { prop:'name'， value:''， type:'input',//表单类型--输入框 }, { prop:'img'， value:'', type:'img'//表单类型--图片 }, { prop:'type'， value:'
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值