Vue动态生成表格的行和列

当在开发项目的时候,固定的页面表格标题及内容不能满足需求,需要根据不同的需求动态加载不同的表格表头和表格的内容,具体的实现代码如下:

<template>
 <div class="boxShadow">
  <div style="margin-top: 20px">

   <el-table
    :data="tables"
    ref="multipleTable"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change='selectArInfo'>
    <el-table-column type="selection" width="45px"></el-table-column>
    <el-table-column label="序号" width="62px" type="index">
    </el-table-column>
    <template v-for='(col) in tableData'>
     <el-table-column
      sortable
      :show-overflow-tooltip="true"
      :prop="col.dataItem"
      :label="col.dataName"
      :key="col.dataItem"
      width="124px">
     </el-table-column>
    </template>
    <el-table-column label="操作" width="80" align="center">
     <template slot-scope="scope">
      <el-button size="mini" class="del-com" @click="delTabColOne()" ><i class="iconfont icon-shanchu"></i></el-button>
     </template>
    </el-table-column>
   </el-table>

  </div>
 </div>

</template>
<script>
 import '../../assets/css/commlist.css'
 import '../../assets/css/commscoped.sass'
 export default {
  data () {
   return {
    tables: [{
     xiaoxue: '福兰',
     chuzhong: '加芳',
     gaozhong: '蒲庙',
     daxue: '西安',
     yanjiusheng: '西安',
     shangban: '北京'
    }, {
     xiaoxue: '南坊',
     chuzhong: '礼泉',
     gaozhong: '礼泉',
     daxue: '西安',
     yanjiusheng: '西安',
     shangban: '南坊'
    }, {
     xiaoxue: '马山',
     chuzhong: '加芳',
     gaozhong: '蒲庙',
     daxue: '西安',
     yanjiusheng: '重庆',
     shangban: '北京'
    }],
    tableData: [{
     dataItem: 'xiaoxue',
     dataName: '小学'
    }, {
     dataItem: 'chuzhong',
     dataName: '初中'
    }, {
     dataItem: 'gaozhong',
     dataName: '高中'
    }, {
     dataItem: 'daxue',
     dataName: '大学'
    }, {
     dataItem: 'yanjiusheng',
     dataName: '研究生'
    }, {
     dataItem: 'shangban',
     dataName: '上班'
    }]
   }
  },
  methods: {
   // 获取表格选中时的数据
   selectArInfo (val) {
    this.selectArr = val
   }
  }
 }
</script> 

实现的效果如下图所示,这个只是一个小的简单示例,表格的数据都是写死的,在我们的项目开发的过程中,我们需要根据自己的开发需求去调用相应的接口,实现相应的表格内容。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)

    动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 template中,form和form-item的写法和绑定 data里的值为空 methods中,向后台获取数据的函数写法  1. form,form-item,input的写法[^code] <el-form :model="dynamicValidateForm" label-width="120px" ref="dynamicVa

  • vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用 复制代码  1 <el-form size="mini" class="lj-form lj-form-s1">  2             <div v-for="(i

  • Vue动态生成表格的行和列

    当在开发项目的时候,固定的页面表格标题及内容不能满足需求,需要根据不同的需求动态加载不同的表格表头和表格的内容,具体的实现代码如下: <template> <div class="boxShadow"> <div style="margin-top: 20px"> <el-table :data="tables" ref="multipleTable" tooltip-effect=&

  • vue+element创建动态的form表单及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用 <el-form size="mini" class="lj-form lj-form-s1"> <div v-for="(item,i) in table.custome

  • JavaScript实现动态生成表格

    本文实例为大家分享了JavaScript实现动态生成表格的具体代码,供大家参考,具体内容如下 功能描述 在输入框中输入行和列,点击按钮,生成拥有对应行和列的表格.如下图所示: 分析 HTML界面设计 <body> 行:<input type="text" id="row" /> 列: <input type="text" id="col" /> <input type="bu

  • javascript动态生成表格详解

    *创建一个页面:两个输入框和一个按钮 *代码和步骤 /* 1.得到输入的行和列的值 2.生成表格 ** 循环行 ** 在行里面循环单元格 3.显示到页面上 - 把表格的代码设置到div里面 - 使用innerHTML属性 */ 代码如下: <html > <head> <title>动态生成表格</title> <style type = "text/css"> </style> </head> <

  • JS实现动态生成表格并提交表格数据向后端

    本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码,分享给大家供大家参考,具体内容如下 先来看一下需求:在web页面上动态的生成表格,并可以对表格中的数据进行编辑,然后把表格中的数据提交至后端服务器保存. 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件. <script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></

  • jQuery实现动态生成表格并为行绑定单击变色动作的方法

    本文实例讲述了jQuery实现动态生成表格并为行绑定单击变色动作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta charset="utf-8"> <title>jquery表格单击变色</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script>

  • C#实现动态生成表格的方法

    本文以实例形式展现了C#实现动态生成表格的方法,分享给大家供大家参考之用.具体方法如下: public string CreateTable() { StringBuilder sb = new StringBuilder(""); int row = 1;//行数 if (true )//是否有数据 { int nRowCount = 10;//所有条数 row = (int)Math.Ceiling(nRowCount / 5.0);//5.0表示每行有多少条数据 int colN

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

  • elementUI 动态生成几行几列的方法示例

    elementUI 动态生成几行几列 table 现在碰到一个需求:就是根据用户选择的行列,来自动生成相应大小的 table,如下这个实现还不完善,因为数据不对,只是实现了动态的效果,仅是提供一种实现思路吧,后续我会再想想看怎么实现为好,先记录一下吧 直接看代码吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>el

随机推荐