vue+element创建动态的form表单.以及动态生成表格的行和列
动态创建form表单,网上有插件 (form-create
) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言.
最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type
用v-if
来渲染对应的表单,数据,事件什么的都可以动态的传进去,比较好用
1 <el-form size="mini" class="lj-form lj-form-s1">
2 <div v-for="(item,i) in table.customerList" :key="i">
3 <!-- 0单行文本 -->
4 <el-form-item
5 :label="item.field_title + ': '"
6 v-if="item.field_type == '0' && item.is_show == '1'"
7 >
8 <el-input v-model="item.value" :placeholder="item.placeholder"></el-input>
9 </el-form-item>
10 <!-- 3下拉菜单 -->
11 <el-form-item
12 :label="item.field_title + ': '"
13 v-if="item.field_type == '3' && item.is_show == '1'"
14 >
15 <el-select v-model="item.value" :placeholder="item.placeholder">
16 <span v-for="(item1,i) in item.field_value" :key="i">
17 <el-option :label="item1" :value="item1"></el-option>
18 </span>
19 </el-select>
20 </el-form-item>
21 </div>
22 </el-form>
动态生成表格的行和列,主要是要求后端返回的数据格式,根据数据来动态渲染
注意点:这里两个数组 : 表格字段数据: titleData: [], 表格详细数据: tables: [], 数据通过字段来查找/渲染成表格的
1 <template>
2 <div class="boxShadow">
3 <div style="margin-top: 20px">
4
5 <el-table
6 :data="tables"
7 ref="multipleTable"
8 tooltip-effect="dark"
9 style="width: 100%"
10 @selection-change='selectArInfo'>
11 <el-table-column type="selection" width="45px"></el-table-column>
12 <el-table-column label="序号" width="62px" type="index">
13 </el-table-column>
14 <template v-for='(col) in titleData'>
15 <el-table-column
16 sortable
17 :show-overflow-tooltip="true"
18 :prop="col.dataItem"
19 :label="col.dataName"
20 :key="col.dataItem"
21 width="124px">
22 </el-table-column>
23 </template>
24 <el-table-column label="操作" width="80" align="center">
25 <template slot-scope="scope">
26 <el-button size="mini" class="del-com" @click="delTabColOne()" ><i class="iconfont icon-shanchu"></i></el-button>
27 </template>
28 </el-table-column>
29 </el-table>
30
31
32 </div>
33 </div>
34
35 </template>
1 data () {
2 return {
3 tables: [{
4 xiaoxue: '福兰',
5 chuzhong: '加芳',
6 gaozhong: '蒲庙',
7 daxue: '西安',
8 yanjiusheng: '西安',
9 shangban: '北京'
10 }, {
11 xiaoxue: '南坊',
12 chuzhong: '礼泉',
13 gaozhong: '礼泉',
14 daxue: '西安',
15 yanjiusheng: '西安',
16 shangban: '南坊'
17 }, ],
18 titleData: [{
19 dataItem: 'xiaoxue',
20 dataName: '小学'
21 }, {
22 dataItem: 'chuzhong',
23 dataName: '初中'
24 }, {
25 dataItem: 'gaozhong',
26 dataName: '高中'
27 }, {
28 dataItem: 'daxue',
29 dataName: '大学'
30 }, {
31 dataItem: 'yanjiusheng',
32 dataName: '研究生'
33 }, {
34 dataItem: 'shangban',
35 dataName: '上班'
36 }]
37 }
vue+element创建动态的form表单.以及动态生成表格的行和列的更多相关文章
- Element Ui使用技巧——Form表单的校验规则rules详细说明
Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...
- Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件
封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...
- vue开发记录--element-ui的form表单label和placeholder国际化遇到的小问题
<el-form-item label="$t('permission.employeeName')"> <el-input v-model="form ...
- 动态设置form表单的元素值
因为经常用到的功能,所以我想到封装一个函数,用起来更方便快捷.. 先来看效果图如下: var data = {a:'aaaa', b:'2', 'c':[1,2,4]} 这就相当于 ajax 返回的j ...
- OA--对于每个form表单(<s:iterator>生成)的处理
由于是后台传过来的,我们不知道form 有几个 也不能指定form的id和name,(其实也可以就是可能会冲突我们还是用下面讲的方法把) 之前有想过 对于每个form 里面都有一些参数,举个例子 项目 ...
- javascript动态添加form表单元素
2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截图,截图数量不确定,因此使用动态添加input节点的方法去实现这个效果 主 ...
- vue项目的elementui的form表单label的对齐方式和 el-date-picker 的长度设置
1.先按照官网的 :label-position 属性玩了一下毫无效果:发现单独使用这个属性是无效的,必须和 label-width 属性一起使用才生效: 如: <el-form :mod ...
- 循序渐进PYTHON3(十三) --2-- DJANGO之FORM表单(自动生成HTML标签和自定制提示信息)
在上一次的代码上做出进一步修改,使之能在页面上显示自定制的报错信息,并且使用form自动创建标签的功能. views.py from django.shortcuts import render,Ht ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
随机推荐
- django学习-安装、创建应用、编写视图
快速安装指南 py -3 -m pip install django >>> import django >>> django.get_version() '2.2 ...
- USACO wormhole
洛谷 P1444 [USACO1.3]虫洞wormhole https://www.luogu.org/problemnew/show/P1444 JDOJ 2386: USACO 2013 Dec ...
- Linux性能优化实战学习笔记:第四十八讲
一.上节回顾 上一节,我们一起学习了如何分析网络丢包的问题,特别是从链路层.网络层以及传输层等主要的协议栈中进行分析. 不过,通过前面这几层的分析,我们还是没有找出最终的性能瓶颈.看来,还是要继续深挖 ...
- 【Arch安装】
[Arch安装]不完整,凭记忆补充 1,制作安装介质(请跳转链接:https://www.archlinux.org/download/) 2,从UEFI模式启动后,按照官方WIKI向导操作(http ...
- 修改Windows中文用户名为英文(更全面的方法)
网上方法很多,但是大多不全面. 我的建议是 1,新建/切换管理员账号 net user administrator /active:yes 然后点击桌面,使用Alt+F4组合键 注销中文用户名账号,并 ...
- [转]numpy中数据合并,stack ,concentrate,vstack,hstack
转自:https://www.cnblogs.com/onemorepoint/p/9541761.html 在python的numpy库中有一个函数np.stack() np.stack 首先sta ...
- GreenPlum 大数据平台--基础使用(二)
连接参数 连接参数 描述 环境变量 应用名称 连接到数据库的应用名称,保存在application_name连接参数中.默认值是psql. $PGAPPNAME 数据库名 用户想要连接的数据库名称.对 ...
- TypeError: Dense_net() takes 0 positional arguments but 1 was given
书写孪生网络的时候出现的错误,调用单通道时出现如下错误. 看了别人写的博客大概和类内的初始化还有self之类的有关系,没有弄清楚.将单通道的文件在函数外声明,在函数内统一调用可以解决这个问题
- Java 并发编程-不懂原理多吃亏(送书福利)
作者 | 加多 关注阿里巴巴云原生公众号,后台回复关键字"并发",即可参与送书抽奖!** 导读:并发编程与 Java 中其他知识点相比较而言学习门槛较高,从而导致很多人望而却步.但 ...
- 是时候解决 students's Test 假设检验(显著性检验)了
T test 由来已久 T 检验的概念 假设检验的步骤 假设检验可以分为三步: 建立检验假设和确定检验水准 单侧检验与双侧检验 选定检验方法和计算检验统计量 确定P值和做出推断结论 假设检验的两类错误 ...